Html IE和FF未按预期工作后的分页符_Html_Printing_Page Break

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

html printing

Html IE和FF未按预期工作后的分页符,html,printing,page-break,Html,Printing,Page Break,我已经阅读了这里和其他地方提出的许多问题，我很困惑为什么分页符似乎对我不起作用。我创建了一个测试html页面，如下所示： <html> <head> <style type="text/css"> @media all { .page-break { } } @media print

我已经阅读了这里和其他地方提出的许多问题，我很困惑为什么分页符似乎对我不起作用。我创建了一个测试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{之后的分页符：始终；}
}
1内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
2内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
...

我有九个这样的分区。够简单吧？这很好（它将每个div按预期放在单独的页面上）。现在来看看那些对IE和FF不起作用的东西我在这里的目标是创建一个简单的html文档，它不会在这9个div中的任何一个内中断。如果我将div样式更改为内部分页符：避免它在IE或FF中完全无效。如果我在：avoid之后尝试分页符或在：auto之后尝试分页符，它似乎对简单的html文档没有任何影响。我错过了什么吗。有没有人有一个可以同时在Explorer和FireFox中使用的解决方案？

不幸的是，FireFox不支持“内部分页符”，所以最好使用“之前分页符：始终”。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>


@媒体印刷品
{
.page break{之前的分页符：始终；}
}
1内容内容
内容内容内容内容
2内容内容
内容内容内容内容
...

感谢您的回复。如果我每页只需要一个div，那么这种方法就可以了，但我希望在不将div一分为二的情况下尽可能多地放在页面上。这有意义吗？在我的html报告中，我有不同高度的部分。我想尽可能多地在页面上添加页面，而不是在中间部分有一个分页。现在我明白你的意思了。为了扩展我之前所说的内容，Firefox