如何在 Safari 中将 HTML 元素打印为页面？答案

【问题标题】：How to print HTML elements as pages in Safari?如何在 Safari 中将 HTML 元素打印为页面？
【发布时间】：2017-02-06 07:23:06
【问题描述】：

以下代码应导致每个div 被打印为单独的页面。每个div 设置为100% 的width 和height。此 HTML 页面在 Safari 5.6.1 以外的所有浏览器 中打印为三页。如何在 Safari 中修复它？

请将以下代码复制到新文件并测试：

<html>
<head>
  <style>
    html,
    body {
      height: auto;
      margin: 0;
      padding: 0;
    }
    input {
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div style="background-color:red; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
  <div style="background-color:green; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
  <div style="background-color:red; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
</body>
</html>

【问题讨论】：

你为什么给position:absolute;输入，你到底想要什么？
您是否尝试将 DIV 的宽度和高度设置为与纸张相同的大小？我建议使用媒体查询：@media print { div { width: 8in; height: 11in } }。您可能需要稍微调整一下这些值。
我无法想象尝试使用 safari 5.6.1 打印的人的市场份额证明添加到文件大小以创建这种兼容性的位是合理的：/

标签： html css printing safari

【解决方案1】：

解决方案

您应该考虑使用page-break-after。您可以通过简单地将page-break-after: always; 添加到您的div 样式中，为您的示例中的每个div 强制分页。

兼容性

如果您在Can I Use 网站上查看page-break-after，98.26% 的浏览器都支持它。这包括 Safari 5.x 和所有其他版本的 Safari。

你的 HTML

如果您想内联添加 page-break-after 属性，您可以使用以下代码：

<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:green; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>

您的代码

如果您只想在用户打印时将page-break-after 添加到您的div，您可以像这样使用@media print CSS 查询：

@media print {
  div {
    page-break-after: always;
  }
}

值得注意的是，@media 查询不能用于内联样式，您必须将其添加到 CSS 文件中，或在 <style> 标记之间。

更新答案

由于 Safari 5.x 仍然打印五页而不是像其他的那样打印三页，请尝试将以下代码添加到您的 HTML：

<style>
  @media print {
    div {
      width: auto !important; /* 100% Might be breaking your current code. */
      height: auto !important; /* 100% Might be breaking your current code. */
      page-break-after: always;
    }
  }
</style>

Safari 可能会将该值识别为高于 100%，从而导致一个 div 打印成多个页面。

如果上面的代码不起作用，请尝试将height: 50px !important; 添加到div 样式并报告结果。前任。哪些页面上显示了哪些颜色？

检查 Safari

让我们尝试一些自定义代码，看看这是否是 Safari 5.x 的错误。我们将使用page-break-after 属性创建三个div 元素。仅此而已。

<!DOCTYPE html>
<html>
<body>
   <div style="page-break-after: always;">Page 1</div>
   <div style="page-break-after: always;">Page 2</div>
   <div style="page-break-after: always;">Page 3</div>
</body>
</html>
</html>

将其粘贴到新的空白 HTML 文档中，然后保存并尝试打印。 Safari 是否仍要打印 5 页？如果是这样，那是 Safari 的一个错误。

如果只打印 3 页，请尝试从代码中的 input 中删除 position:absolute。如果这不能解决问题，请慢慢地从头开始重建您的页面，看看是什么代码导致它分成 5 个页面。

解决方案

兼容性

你的 HTML

您的代码

更新答案

检查 Safari

更多信息