CSS를 사용하여 Chrome에서 A4 인쇄 클리핑을 수정하는 방법은 무엇입니까?

정확한 인쇄를 위해 A4 용지 크기를 설정하는 CSS

문제:

HTML 요소 크기를 A4 크기(21cm)로 설정 x 29.7cm) 브라우저에서는 올바르게 표시되지만 Chrome에서 인쇄할 때 페이지가 잘립니다. window.

분석:

특히 Chrome에서는 인쇄 매체 규칙의 페이지 너비에 '초기'를 할당하는 데 문제가 있는 것 같습니다. 이로 인해 콘텐츠 크기가 정의된 A4 크기보다 약간 더 커지게 되어 잘림 현상이 발생합니다.

해결책:

이 문제를 해결하려면 '초기화'를 사용하지 마세요. ' 인쇄 매체 규칙의 페이지 너비입니다. 대신 A4 크기를 HTML, 본문에 명시적으로 할당하거나 '.page' 요소에 직접 할당하세요.

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

고정 크기를 설정하면 콘텐츠가 A4 경계 내에 유지되어 잘림을 방지할 수 있습니다. 이렇게 하면 나머지 CSS 스타일을 유지하면서 Chrome의 문제가 해결됩니다.

참고: 이 수정 사항은 Chrome에서 페이지 너비에 대한 '초기' 처리와 관련된 특정 문제를 해결합니다. 그러나 인쇄된 출력물의 일관성과 정확성을 보장하려면 다양한 브라우저에서 인쇄 기능을 테스트하는 것이 중요합니다.

위 내용은 CSS를 사용하여 Chrome에서 A4 인쇄 클리핑을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!