IE 和 FF 的分页后未按预期工作

发布于 2024-09-07 16:15:34 字数 4373 浏览 9 评论 0原文

我已经阅读了这里和其他地方提出的很多问题，我很困惑为什么分页符似乎对我不起作用。我创建了一个测试 html 页面，如下所示：

<html>
    <head>
        <style type="text/css">
            @media all
            {
                .page-break { }
            }

            @media print
            {
                div {page-break-after:always; }
            }
        </style>
    </head>
    <body>
        <div class="page-break">
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
...
</body>
</html>

我有九个这样的 div。够简单吧？这工作得很好（它按预期将每个 div 放在单独的页面上）。现在来说说那些不适用于 IE 和 FF 的东西。 我的目标是创建一个简单的 html 文档，该文档永远不会在这 9 个 div 之一内中断。如果我将 div 样式更改为 page-break-inside:avoid 它在 IE 或 IE 中绝对没有效果FF。如果我尝试 page-break-after:avoid 或 page-break-after:auto 它似乎对简单的 html 文档没有任何影响。我是不是错过了什么。有谁有一个可以在 Explorer 和 FireFox 中工作的解决方案吗？

原文

I have read through a lot of the question asked here and other places and I am confused why page-breaks don't seem to work for me. I created a test html page that looks like this:

<html>
    <head>
        <style type="text/css">
            @media all
            {
                .page-break { }
            }

            @media print
            {
                div {page-break-after:always; }
            }
        </style>
    </head>
    <body>
        <div class="page-break">
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
...
</body>
</html>

I have nine of these divs. Simple enough right? This works just fine (it puts each div on a separate page as expected). Now for the stuff that is not working for IE and FF. My goal here is to create a simple html document that never breaks inside one of these 9 divs. If I change my div style to be page-break-inside:avoid it has absolutely no effect in IE or FF. If I try page-break-after:avoid or page-break-after:auto it doesn't seem to have any effect on the simple html document. Am I missing something. Does anyone have a solution that will work in both Explorer and FireFox?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

肩上的翅膀 2024-09-14 16:15:36

不幸的是，Firefox 不支持“page-break-inside”，因此最好的选择是使用“page-break-before:always”。 IE 和 Firefox 支持这一点，并将确保每个 DIV 都有完整的页面空间可供使用。我也不会将该类应用于第一个 DIV，因为这会强制进行不必要的中断。这是标记：

<html>
    <head>
        <style type="text/css">
            @media print
            {
                .page-break { page-break-before: always; }
            }
        </style>
    </head>
    <body>
        <div>
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
...
</body>
</html>

Unfortunately, Firefox doesn't support "page-break-inside" so your best bet is to use "page-break-before: always". That is supported by IE and Firefox and will ensure each DIV has a full page of space to use. I would also not apply the class to the first DIV, as that would force an unnecessary break. Here is the markup:

<html>
    <head>
        <style type="text/css">
            @media print
            {
                .page-break { page-break-before: always; }
            }
        </style>
    </head>
    <body>
        <div>
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
...
</body>
</html>

回复收藏 0 原文

~没有更多了~