Question

我正在尝试将一些分页符放入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包装器中。

我查看了引导程序代码，并没有看到任何可能妨碍的方法。这有什么与任何人敲响了吗？

Answer 1

所以：稍后会有一些样式表黑客攻击，而且看起来罪魁祸首在bootstrap.css的第255行：

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

在上面的演示代码中，如果您删除float: left，Safari会正确执行请求的分页。作为测试，我可以通过添加到我的页面来解决它：

section.span12 {
    float: inherit;
}

奇怪......对此的想法很受欢迎。

Bootstrap 2.3.2 css在Safari中打破了分页符（？）

1 个答案: