> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 Chrome에서 A4 인쇄 클리핑을 수정하는 방법은 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-12-14 00:05:10
원래의
608명이 탐색했습니다.

How to Fix A4 Print Clipping in Chrome Using CSS?

정확한 인쇄를 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿