【问题标题】:CSS page headers - how to use print margins?CSS 页眉 - 如何使用打印边距?
【发布时间】:2011-05-19 21:06:07
【问题描述】:

我可以在每一页上打印一个标题,但我是打印页边距的新手。我认为@page css 会起作用,但它似乎不会影响页边距。如果我在正文上设置边距,它在第一页上有效,但后续页面默认从顶部边距开始,将页眉放在文本顶部。

<style>  
.header {  
 position: fixed;  
 top: 0;  
}  
@page {  
 size: 11in 17in;  
 margin-left: 1in;  
 margin-right: 1in;  
 margin-top: 1in;  
 margin-bottom: 1in;  
} 
</style>

<body>  
<span class=header>This is the header</span>  
This is the text of the document. (repeat until I get to page 2)  
</body>

【问题讨论】:

标签: css printing margins


【解决方案1】:

现在 4 1/2 岁的公认答案是:

“如果你需要确保特定的布局,简短的回答是避免 HTML/CSS 打印。”

如今,您可以在浏览器中为相对简单的布局进行 HTML/CSS 打印,或者如果您使用像 wkhtmltopdf 这样的工具,您可以使用更复杂的布局。另见http://www.toccon.com/toc2013/public/schedule/detail/26714

【讨论】:

    【解决方案2】:

    所有浏览器的打印支持都非常糟糕,许多流行浏览器中存在可怕的错误,这些错误多年来一直未修复。

    如果您需要确保特定的布局,简短的回答是避免使用 HTML/CSS 打印。使用 PDF,可能是按需动态生成的。有各种 PDF 生成器 API,例如 iTextSharp。可以从 Flash 打印,但前提是安装了 Flash 并且可以正常工作(即没有 Flashblock,iOS)。

    HTML/CSS 打印应仅限于简单的布局。表单打印是一场噩梦,fieldsetlegend 支持尤其成问题(尤其是在 Firefox 上)。有趣的是,Internet Explorer 上的打印支持最好。

    CSS3 打印支持规范尚未完成,有一段时间了。

    一般原则:

    • 不支持背景或背景 CSS 图像(默认情况下 - 用户可以更改内部网应用程序的浏览器设置)。仅打印前景图像。

    • 随着全球页面大小的不同,宽度需要灵活变化。 US Letter 格式比 A4 版式更短更宽

    • 所有浏览器都支持以不同方式打印。虫子很多。

    • 使用打印预览进行测试。

    【讨论】:

    • 这个答案已经三年了,但我遇到了同样的问题。与此同时,print css 支持是否变得更好了?具体来说,stackoverflow.com/questions/18173423/…
    • 不,位置还是差不多的。
    • 我知道现在像PDFShift 这样的一些在线服务可以正确处理打印CSS 规则。 (我在 PDFShift 工作)
    猜你喜欢
    • 2011-06-28
    • 2010-12-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-20
    • 1970-01-01
    • 2012-04-01
    相关资源
    最近更新 更多