CSS 표준은 몇 가지 고급 형식을 지원합니다. @pageCSS 에는 종이와 같은 페이징 된 미디어에만 적용 할 수있는 형식을 지정할 수 있는 지시문이 있습니다. http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html을 참조 하십시오 .
단점은 다른 브라우저에서의 동작이 일관성이 없다는 것입니다. Safari는 여전히 프린터 페이지 여백 설정을 전혀 지원하지 않지만 다른 모든 주요 브라우저는이를 지원합니다.
@page지시문을 사용하면 페이지의 프린터 여백을 지정할 수 있습니다 (HTML 요소의 일반 CSS 여백과 동일하지 않음).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
html
{
background-color: #FFFFFF;
margin: 0px; /* this affects the margin on the html before sending to printer */
}
body
{
border: solid 1px blue ;
margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
머리글과 바닥 글을 제거하는 효과를 얻기 위해 기본적으로 페이지 별 여백을 비활성화하므로 본문에 설정 한 여백은 페이지 나누기에서 사용되지 않습니다 ( Konrad 에서 언급 한대로 ). 인쇄 된 내용이 한 페이지 만 인 경우 제대로
Firefox 3.6 , IE 7 , Safari 5.1.7 또는 Chrome 4.1 에서는 작동하지 않습니다 .
@page margin 설정은 IE 8 , Opera 10 , Chrome 21 및 Firefox 19에서 적용 됩니다.
이러한 브라우저에서 콘텐츠에 대한 페이지 여백이 올바르게 설정되어 있지만 머리글 / 바닥 글 숨기기를 해결하는 데 이상적입니다.
이것은 다른 브라우저에서 작동하는 방식입니다.
Internet Explorer 에서는 이 인쇄 설정에서 여백이 실제로 0mm로 설정되어 있으며 미리보기를 수행하면 기본적으로 0mm가되지만 미리보기에서이를 변경할 수 있습니다.
페이지 내용이 실제로 올바르게 배치 된 것을 볼 수 있지만 브라우저 인쇄 머리글과 바닥 글은 투명하지 않은 배경으로 표시되므로 해당 위치에서 페이지 내용을 효과적으로 숨길 수 있습니다.
에서 파이어 폭스 최신 버전, 그것은되는 위치 를 올바르게하지만 나쁜 브라우저 헤더 텍스트의 혼합 및 페이지 콘텐츠처럼 보이는 있도록 머리글 / 바닥 글 텍스트 및 컨텐츠 텍스트 모두 표시됩니다.
Opera 에서는 표준 CSS에서 불투명 배경을 사용할 때 페이지 내용이 머리글을 숨기고 머리글 / 바닥 글 위치가 내용과 충돌합니다. 꽤 좋지만 여백이 작은 값으로 설정되어 헤더가 부분적으로 표시되는 경우 이상하게 보입니다. 또한 페이지 여백이 올바르게 설정되지 않았습니다.
에서 크롬 최신 버전, 브라우저 머리글과 바닥 글은 @page 마진이 너무 작게 설정되어있는 경우 숨겨진 내용으로 머리글 / 바닥 글 위치 충돌이.입니다 제 생각에는 이것이 정확히 어떻게 작동 해야하는지입니다.
결론은 Chrome 이 머리글 / 바닥 글을 숨기는 데 가장 적합한 구현이라는 것입니다.