用css打印分页|分页之前:总是;跨浏览器问题!

发布于 2024-08-13 05:53:06 字数 902 浏览 8 评论 0原文

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

欣赏有帮助!


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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我早已燃尽 2024-08-20 05:53:06

你的代码看起来很完美。它对我使用 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?)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文