Question

在Firefox中，page-break-after: always;指令运行正常。但是，这个相同的代码似乎被IE忽略了。在保存然后测试打印预览之前，测试，复制并粘贴代码到新的HTML文档中。在打印预览期间，我希望page-break-after指令能够实际执行它所说的内容，就像在Firefox中一样。

以下整个代码：

<html>
<head>
<style type="text/css">
body
{
    margin: 0;
    font-style: verdana;
    font-size: 12px;
    clear: both;
}
div.header
{
    display: block;
}
div.header img
{
    height: 160px;
    display: block;
    margin: 0 auto;
}
div.left
{
    float: left;
    width: 40%;
    min-height: 550px
}
div.right
{
    float: left;
    width: 40%;
    display: block;
    margin-left: 40px;
    min-height: 550px;
    page-break-after: always;
}
div.last
{
    min-height: 550px;
    width: 100%;
    display: block;
    clear: both;
    margin-bottom: 20px;
    page-break-after: always;
}
div.images
{
}
div.images img
{
    max-height: 240px;
    margin: 10px;
    display: block;
    margin: 0 auto;
}
img.smaller
{
    padding-bottom: 10px;
}
h3
{
    font-weight: bold;
    display: inline;
}
h3.blurb
{
    display: block;
    margin-bottom: 5px;
}
hr.line
{

}
span.blurb
{
    display: block;
    border: 1px solid #000;
    padding: 2px;
    word-wrap: break-word;
}
span.memories
{

}
span.activities
{

}
span.university
{

}
span.children
{

}
span.hobbies
{

}
span.volunteer
{

}
</style>
<!--[if IE]>
<style type="text/css">
div.left
{
    height: expression( document.body.clientHeight > 550 ? "550px" : "auto" );
}
div.right
{
    height: expression( document.body.clientHeight > 550 ? "550px" : "auto" );
}
div.images img
{
    height: expression( document.body.clientHeight > 240 ? "240px" : "auto" );
}
img.smaller
{
    display: block;
    padding-bottom: 10px;   
}

img
{
    text-align: center;
}
</style>
<![endif]-->
</head>
<body>
<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div>
<div class="left">
    <h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />


    <h3>Current Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Address:</h3> 2345 Vivamus et Tellus Street
    <hr class="line" />

    <h3>Home Phone:</h3> 9096761212
    <hr class="line" />

    <h3>Cell Phone:</h3> 9096761212
    <hr class="line" />


    <h3>Email:</h3> lipsum@marius.com
    <hr class="line" />

    <h3>Employer/Retired:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Job Title:</h3> Lorem ipsum dolor sit ame
    <hr class="line" />

    <h3>Are you planning to attend reunion?</h3> Yes
    <hr class="line" />


    <h3 class="blurb">Memories:</h3>
    <span class="blurb memories">None provided</span>

    <h3 class="blurb">Student Activities/Clubs:</h3>
    <span class="blurb activities">None provided</span>
</div>
<div class="right" style="page-break-after: always;">
    <h3>Major:</h3> Lorem ipsum dolor sit ame
    <hr class="line" />


    <h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3 class="blurb">Spouse/Partner University and Class Year:</h3>

    <span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span>

    <h3 class="blurb">Children (list names/ages):</h3>
    <span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span>

    <h3 class="blurb">Interests/Hobbies:</h3>
    <span class="blurb hobbies">Lorem ipsum dolor</span>

    <h3 class="blurb">Volunteer Work (include services):</h3>

    <span class="blurb volunteer">None provided</span>
</div>
<div class="last" style="page-break-after: always;">
    <h3 class="blurb">Life since</h3>
    <span class="blurb life">None provided</span>
</div>


<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div>
<div class="left">
    <h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />


    <h3>Current Name:</h3> Lorem ipsum
    <hr class="line" />

    <h3>Address:</h3> None provided
    <hr class="line" />

    <h3>Home Phone:</h3> None provided
    <hr class="line" />

    <h3>Cell Phone:</h3> None provided
    <hr class="line" />


    <h3>Email:</h3> None provided
    <hr class="line" />

    <h3>Employer/Retired:</h3> None provided
    <hr class="line" />

    <h3>Job Title:</h3> None provided
    <hr class="line" />

    <h3>Are you planning to attend reunion?</h3> Yes
    <hr class="line" />


    <h3 class="blurb">Memories:</h3>
    <span class="blurb memories">None provided</span>

    <h3 class="blurb">Student Activities/Clubs:</h3>
    <span class="blurb activities">None provided</span>
</div>
<div class="right" style="page-break-after: always;">
    <h3>Major:</h3> Lorem ipsum dolor sit ame
    <hr class="line" />


    <h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
    <hr class="line" />

    <h3 class="blurb">Spouse/Partner University and Class Year:</h3>

    <span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span>

    <h3 class="blurb">Children (list names/ages):</h3>
    <span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span>

    <h3 class="blurb">Interests/Hobbies:</h3>
    <span class="blurb hobbies">Lorem ipsum dolor</span>

    <h3 class="blurb">Volunteer Work (include services):</h3>

    <span class="blurb volunteer">None provided</span>
</div>
<div class="last" style="page-break-after: always;">
    <h3 class="blurb">Life since</h3>
    <span class="blurb life">None provided</span>
</div>
</body>
</html>

Answer 1

用问题回答问题的道歉，但可能是因为分页符应用于定位元素吗？

MSDN明确指出

在定位的对象中不允许分页符。

http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx

Answer 2

分页（之前和之后）对于自己的的Internet Explorer 是不够的。如果你试试这个，你可以看到结果。我有同样的问题，但我通过这种方式解决了。

count: function() { return makePromise(User, User.count) }

Answer 3

小心内联元素。我无法让page-break-after: always;在IE中<br>和<span>上工作，但它在<div>上工作正常。

<br style="page-break-after: always;">          <!-- does not work -->
<span style="page-break-after: always;"></span> <!-- does not work -->
<div style="page-break-after: always;"></div>   <!-- this works! -->

IE7 / IE8 page-break-after：总是不起作用

3 个答案: