在 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> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="432f2a3330362e032e22312a36306d202c2e" rel="noreferrer noopener nofollow">[email protected]</a>
<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>
最佳答案
很抱歉用问题回答问题，但这可能是因为分页符应用于定位元素吗？
MSDN 明确指出
Page breaks are not permitted inside positioned objects.
http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx
关于html - IE7/IE8 分页-:always not working 之后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9595412/