我正在尝试使用 page-break-before 将一些分页符放入页面中。该站点是围绕 Bootstrap 2.3.2 构建的；我所拥有的在 Mac Chrome 和 Firefox 中运行良好，但在 Safari (7.0.1) 中运行良好。我的一个页面的精简版(也可在 http://sampleco.net/print.php 获得):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Storyboards for Project 1</title>
<style>@import url("bootstrap.css");</style>
<style type='text/css'>
.vr_pagebreak {
page-break-before: always;
}
</style>
</head>
<body>
<div id="main_container" class="container">
<div class="row">
<section class="span12">
<h1 class="page-header">A general page header</h1>
<div class='vr_pagebreak'></div>
<h2>Scene 741: Alice places the call</h2>
<p>Something about the scene and image.</p>
<div class='vr_pagebreak'></div>
<h2>Scene 2314: Scene with no takes (2314)</h2>
<p>Something about the scene and image.</p>
</section>
</div>
</div>
</body>
</html>
(这里有一些 Drupalisms，是原始站点遗留下来的，但目前并不多。)bootstrap.css 只是 Bootstrap 2.3.2 css 文件的一个副本。如果从该页面中删除它，我的分页符将在 Safari(以及其他浏览器)中正常工作。 FWIW，向 vr_pagebreak div 添加一些文本没有效果，也没有将 vr_pagebreak css 放入 @media print 包装器中。
我查看了 Bootstrap 代码，没有看到任何可能妨碍的东西。这对任何人都有影响吗？
最佳答案
所以:稍后对样式表进行了一些修改，看来罪魁祸首在 bootstrap.css 的第 255 行:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
在上面的演示代码中，如果您删除 float: left，Safari 会正确执行请求的分页。作为测试，我可以通过添加到我的页面来破解它:
section.span12 {
float: inherit;
}
奇怪...欢迎对此进行思考。
关于css - Bootstrap 2.3.2 css 在 Safari 中打破分页前(？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20844442/