CSS 标准支持一些高级格式设置。有一个@page
CSS 中的指令启用某些仅适用于分页媒体(如纸张)的格式。看http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html 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>
请注意,我们在这里基本上禁用了特定于页面的边距,以达到删除页眉和页脚的效果,因此我们在正文上设置的边距将不会用于分页符(如康拉德评论 https://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page/2780518?noredirect=1#comment74527214_2780518)这意味着只有打印内容只有一页时它才能正常工作。
这不适用于火狐3.6, IE 7, Safari 5.1.7 or 谷歌浏览器 4.1.
设置@page margin确实有效果IE 8, Opera 10, 谷歌浏览器 21 and 火狐19.
尽管在这些浏览器中为您的内容正确设置了页边距,但在尝试解决页眉/页脚的隐藏问题时,该行为并不理想。
这是它在不同浏览器中的行为方式:
-
In IE浏览器,在本次打印的设置中,边距实际上设置为 0mm,如果进行预览,则默认为 0mm,但用户可以在预览中更改它。
你会看到页面内容实际上是定位正确,但浏览器打印页眉和页脚以不透明背景显示,因此有效地隐藏了该位置的页面内容。
-
In Firefox新版本是定位正确,但页眉/页脚文本和内容文本都会显示,因此它看起来像是浏览器页眉文本和页面内容的糟糕组合。
-
In Opera,在标准css中使用非透明背景时页面内容会隐藏页眉并且页眉/页脚位置与内容冲突。相当不错,但如果将边距设置为较小的值,导致标题部分可见,则看起来很奇怪。另外页边距设置不正确。
-
In Chrome在较新的版本中,如果 @page 边距设置得太小以致页眉/页脚位置与内容冲突,则浏览器页眉和页脚将被隐藏。在我看来,这正是应该的行为方式。
所以结论是Chrome在隐藏页眉/页脚方面有最好的实现。