用css打印分页|分页之前:总是;跨浏览器问题!
我有一个关于打印分页的问题。你可以在下面看到我的代码。它不会为打印预览造成分页符:(知道可能是什么问题吗?
欣赏有帮助!
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 标签:/它位于 << div id="换行">然后我删除了所有 标签覆盖h1,效果很好 现在!奇怪!!
I have an issue about print paging. you can see my code below. it is not making page break for the print preview :( any idea what can be the problem?
Appreciate helps!
HTML Code
<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 Code
@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; }
}
SORTED!!
I moved the pagebreak class to h1, also the html tag (h1) has to be not under
any other html tag :/ it was under <
div id="wrap"> and then I removed all
tags covering h1, and it works well
now! WEIRD!!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你的代码看起来很完美。它对我使用 Firefox 3.5.5 和 IE 8.0 非常有用。我敢打赌您正在不兼容 CSS2/3 的浏览器中测试它。更改您的浏览器,它会很好用。
此链接列出了 CSS3 功能的支持: http://www.webdevout.net/browser-support- css
(浏览器不支持的状态令人沮丧,不是吗?)
Your code looks perfect. It works great for me using Firefox 3.5.5 and also in IE 8.0. I'll bet you're testing it in a browser that is not CSS2/3 compliant. Change your browser and it'll work great.
This link lists support of CSS3 features: http://www.webdevout.net/browser-support-css
(The state of non-support in browsers is frustrating, isn't it?)