CSS 및 JavaScript를 사용하여 기본 브라우저 인쇄 설정을 어떻게 재정의할 수 있습니까?

웹 페이지의 인쇄물에 대한 기본 브라우저 인쇄 설정 비활성화

많은 웹 개발자는 특히 인쇄용 기본 브라우저 인쇄 설정을 수정하는 솔루션을 모색해 왔습니다. 머리글, 바닥글, 여백. 이 문서의 목적은 다양한 브라우저에서 CSS와 JavaScript를 통해 사용할 수 있는 옵션에 대한 포괄적인 이해를 제공하는 것입니다.

CSS 솔루션

CSS의 @page 지시문은 고급 서식 지정을 제공합니다. 종이와 같은 페이징된 미디어에 대한 옵션입니다. 요소 여백과 관계없이 페이지에 대해 특별히 프린터 여백을 지정할 수 있습니다.

@page {
    margin: 0mm;
}

그러나 이 지시문에 대한 지원은 브라우저마다 다릅니다. Safari, Internet Explorer, Opera 및 Chrome과 같은 브라우저는 프린터 페이지 여백 설정을 지원하지만 Firefox는 여전히 지원하지 않습니다.

페이지 나누기 및 내용 여백 사용자 정의

인쇄 여백에서는 CSS를 사용하여 머리글과 바닥글을 제거하여 페이지 나누기와 내용 여백을 제어할 수 있습니다.

body {
    margin: 10mm 15mm 10mm 15mm;
}

인쇄할 때, 브라우저는 본문 여백으로 지정된 영역의 콘텐츠를 억제하여 페이지 머리글과 바닥글을 효과적으로 숨깁니다. 그러나 이는 인쇄된 콘텐츠가 단일 페이지에 맞는 경우에만 작동합니다.

브라우저 동작

이 설정의 동작은 브라우저마다 다릅니다.

• Internet Explorer: 올바른 인쇄 여백을 설정하지만 불투명한 배경으로 브라우저 머리글/바닥글을 표시하여 content.
• Firefox: 콘텐츠 위치를 올바르게 지정하지만 브라우저 머리글/바닥글 텍스트와 콘텐츠 텍스트가 모두 표시되어 혼합 표시됩니다.
• Opera: 머리글을 숨겼지만 여백이 제대로 설정되지 않았습니다. 헤더 가시성 문제가 발생할 수 있습니다.
• Chrome: 페이지 여백이 해당 위치와 충돌하는 경우 브라우저 헤더/바닥글을 숨겨 이를 숨기기 위한 최상의 구현을 제공합니다. elements.

결론

CSS는 인쇄 설정을 처리하는 메커니즘을 제공하지만 브라우저 지원 및 동작은 다양합니다. Chrome은 머리글과 바닥글을 숨기는 데 가장 바람직한 동작을 나타냅니다. 그러나 브라우저 간 일관성이 중요한 경우 대체 솔루션을 고려해야 할 수도 있습니다.

위 내용은 CSS 및 JavaScript를 사용하여 기본 브라우저 인쇄 설정을 어떻게 재정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!