用css打印分页|分页前：总是；跨浏览器问题！答案

【问题标题】：print out paging with css | page-break-before:always; cross-browser issue!用css打印分页|分页前：总是；跨浏览器问题！
【发布时间】：2009-12-01 12:11:06
【问题描述】：

我有一个关于打印分页的问题。你可以在下面看到我的代码。它没有为打印预览制作分页符:(知道可能是什么问题吗？

感谢帮助！

HTML 代码

<h1>header text</h1>
<p>Lorem Ipsum jhdfb jdhbg sdfgshdbfgkjhsdbgkjhbs d sdgf</p>    
<div class="pagebreak"></div>

<h1>header text</h1>
<p>Lorem Ipsum jhdfb jdhbg sdfgshdbfgkjhsdbgkjhbs d sdgf</p>    
<div class="pagebreak"></div>

CSS 代码

@media screen {
    .pagebreak  { height:10px; background:url(img/page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
    .pagebreak { height:0; page-break-before:always; margin:0; border-top:none; }
}

排序！！

我将分页符类移动到 h1，html 标签 (h1) 也必须不在下面任何其他html标签：/它在然后我删除了所有标签覆盖h1，效果很好现在！奇怪！！

【问题讨论】：

我实际上是通过 php 创建这个输出，动态内容来自 db。但实际上你是对的，这不是 php 的问题，对不起。我编辑标签

标签： html css printing cross-browser page-break

【解决方案1】：

您的代码看起来很完美。它非常适合我使用 Firefox 3.5.5 和 IE 8.0。我敢打赌，您是在不兼容 CSS2/3 的浏览器中测试它。换个浏览器就好了。

此链接列出了对 CSS3 功能的支持：http://www.webdevout.net/browser-support-css

（浏览器不支持的状态令人沮丧，不是吗？）

【讨论】：

其实我也想过这个问题。我有 Mac [snow leopard] 并正在运行 Safari。我也在firefox上测试过，但这是同样的问题！ :( 现在我只下载了 Opera，它在 Opera 下运行良好......我希望这并不意味着当我从 safari 打印输出时它不会进行分页 :( ?
嗯，真的很糟糕！！！刚刚测试从 safari 打印输出，它不会进行分页 :( 还有其他适用于所有浏览器的方法吗？
如果你取出@media {} 块怎么办？
@Pekka - 不，它没有帮助：/
+1 感谢您提供的链接，我正在浏览它，似乎所有列出的浏览器都支持page-break-before: always。嗯，你确定你的<style> 标签没有媒体属性吗？ - 这会导致它忽略 @media 块。