当从 Firefox 打印时（我认为在任何操作系统上），浏览器会在分页符之间拆分图像，有时甚至是文本行——图像的顶部显示在页面n的底部，其余部分显示在顶部第n + 1页。
有什么方法可以让 Firefox 在打印时将图像保留在单个页面上？
TLDR：浏览器严重支持分页符（可能有充分的理由），因此主要由页面设计人员来处理这个问题。对于其余的，您几乎无能为力，除了将其复制粘贴到文档中。C-Net 也同意。
分页符
由于“打印页边距”不在您作为 Web 作者的控制之下，您不能保证每页上将打印多少 Web 文档以及分页符的位置。它会根据用户的浏览器、浏览器设置和打印机而有所不同。而且用户的基本字体大小和信纸大小也不在您的控制范围内。您将希望使用 CSS 来影响（而不是控制）分页符的位置。CSS2.1 Chapter 13 Paged Media是必不可少的读物。请注意，在本章中，CSS2.1 删除了 CSS2 中浏览器从未实现的一些功能。
对分页属性（例如 page-break-inside）的支持很差，即使在最新的浏览器中也是如此，主要的例外是 Opera（Opera 5 起），它的支持非常好：
更糟糕的是，浏览器可能会在明显不可接受的地方破坏页面（另见下一段）。例如，我发现浏览器会跨页面破坏图像的情况。在我的各个站点上进行的测试表明，Opera 的分页处理虽然并不完美，但明显比 Firefox 或 IE 更强大。
Eric 的文章（见下文）提到了基于 Gecko (Mozilla) 的浏览器中有关打印浮动元素的错误。此错误显然尚未修复 [2009 年 7 月]导致浮动元素在打印页面的末尾被截断，有时仅在打印文档的一页 [注 2]。我发现旧版本的 Opera（例如 O7.21）存在类似的浮动斩波问题。IE 中报告了一个不同的错误，如果浮动元素的顶部恰好与分页符重合，则浮动元素根本不会打印 [致谢：Rennan Rieke]。
建议的分页策略
最好的策略（当然，在浏览器改进之前）是让他们休息一下（哈！），让他们尽可能多地选择断点。它们在处理并排元素方面存在特殊问题，例如定位<div>s；浮动; 和具有两列或更多列的表格。因此，合适的策略包括使定位<div>s 为静态；浮动浮标；并将用于布局的表格分解为一系列较短的表格 [注 1]。即使对分页属性的支持很差，也不要过度限制浏览器：尽可能轻柔地使用“避免”值。
当涉及到打印时，浏览器真的不喜欢浮点数（参见上一节）。解决方法是取消浮动浮动元素（浮动：无，也许宽度：自动也是如此）。如果您在打印时确实冒着浮动元素的风险，它可能会跨分页符打印（浮动元素的顶部锚定到当前行）。根据漂浮材料的性质，这可能是可接受的行为。如果没有，只有 Opera 才能让您抑制这种分裂。
如果您必须仅在一页上打印某些内容，例如表单，您最好的机会是使其长度明显少于一页，以便您有一个很好的容错率（原文如此）。关于信纸尺寸，您可以选择采用国际 (ISO) 标准 A4 尺寸（适用于国际受众）或美国 Letter 尺寸（仅限美国受众），尽管无法保证用户使用的尺寸。但是问问自己，如果您使用文字处理器制作了一页表格，而视力受损的用户要求提供大字体版本，您会如何回应。与 Web 设计和 CSS 一样，如果您不尝试通过坚持像素完美或保证分页符来与用户抗争，生活就会简单得多。流体设计适用于纸张和屏幕。
小智 5
这个问题困扰我很久了。我发现如果在页面上右键单击，转到“检查元素”，然后转到检查窗口中的“样式编辑器”，则可以添加：
p {
page-break-inside: avoid;
}
这通常会做到。我看到有人建议将这种样式放在 'img' 标签中，但这在我尝试使用它的任何页面上都不起作用。
如果您想分隔页面的主要元素，此标记也很方便。例如，当我从 EBSCOhost 打印内容时，将该样式放在“正文”标签中会将引文放在一页上，将文本放在他们自己的页面上，并将图像放在他们自己的页面上。这是一种非常方便的风格。
| 归档时间： |
|
| 查看次数： |
12387 次 |
| 最近记录： |