@media 打印在 Chrome 中无法正常工作

Posted 2023-03-06

【中文标题】@media 打印在 Chrome 中无法正常工作

【英文标题】：@media print not working properly in Chrome

【发布时间】：2017-09-24 12:32:21

【问题描述】：

已经找到/阅读/尝试了很多关于这个问题的答案，如果解决方案已经发布，但 Chrome 没有正确显示打印样式并且缺少许多元素（但不是全部），那么很抱歉。

这是设置的方式。

1.设置

使用@media print在主css文件的末尾设置打印样式

加载css文件的链接没有媒体属性

我们在所有打印样式上声明 !important

打印样式会在需要时覆盖屏幕样式（即屏幕样式未包含在 @media screen

Chrome 开发工具中的打印模拟完美显示打印样式

但某些元素在打印（和/或打印到 PDF）时会消失

如果使用打印 html 按钮或文件中的“打印”会出现问题 菜单

在 Firefox 或 Safari 中不会出现此问题

---

2。故障排除

打印样式被包裹在@media only print

所以尝试像 @media print 这样删除“仅”，但没有区别

如果我像这样错误地将“仅”移动到“打印”之后@media print only

然后一些缺少的打印元素会显示，但其他会消失

如其他地方所述，在打印样式开始时尝试了此 hack，但没有成功

* -webkit-transition: none !important; transition: none !important;

---

欢迎任何帮助或建议。

干杯

本

【问题讨论】：

你在使用像 Bootstrap 这样的框架吗？如果是这样，请注意大多数框架也有自己的基本打印样式，您可能需要将其注释掉或覆盖。

感谢您的回复。我们没有使用框架，我也刚刚在代码库中搜索了@media print，一切都检查出来了。此外，开发工具中没有显示额外的样式，事实上，当开发工具设置为模拟 CSS Media Print 时，一切都会完美显示。似乎开发工具和打印对话在某些地方存在分歧。

尝试在 Chrome 中缩小垂直边距，和/或从 presenter-notes__main-content 类中删除 display: inline-block。

谢谢，是的，好像是inline-block。删除后，页面会在 Chrome 中打印，但布局已损坏。为presenter-notes__main-content 添加额外的宽度也可以部分修复打印，但也会导致布局损坏。会修改一些调整样式，但至少会打印页面。想知道为什么开发工具打印预览没有损坏，但打印对话框却损坏了吗？也许这与将页面大小设置为 A4 有关？

【参考方案1】：

此问题是由您的主要内容容器类 presenter-notes__main-content 上的 CSS 声明 display: inline-block 引起的。

inline-block 本质上是内部的块元素和外部的内联元素。内联元素在打印中是牢不可破的，除非它是换行的，在这种情况下，分页符只能发生在行之间。这可以防止单独的文本行被分页符水平分割，这会使打印的文档非常难以阅读。内联块永远不会换行（这是因为它的内容会换行而不是元素本身），因此始终是牢不可破的。

那么，如果您的元素太大而无法放在单个页面上，但又无法拆分到多个页面中，会发生什么情况？疯狂的东西，就是这样！当然，有些浏览器可能会优雅地降级并且只是剪切溢出，但其他浏览器可能会感到困惑并完全删除该元素。计算机不擅长处理悖论。

【讨论】：

谢谢，令人沮丧的是，开发工具正确地模拟了@media print 样式，但打印却没有。我们还使用了inline-block 网格，所以我们有点卡住了，除非我们实现不同的打印网格。希望 20 年的 hacking CSS 布局已经结束，现在专门构建的布局工具终于下流了。干杯

如果您使用 inline-block 并排放置元素，那应该没问题。您只需要避免在任何可能比您打算支持的最小可打印区域更宽或更高的元素上使用它。

是的，它是inline-block，因为它是网格工作方式的一部分。是的，我想它可能比 A4 更高，因为它是主要内容区域。也许我应该隐藏侧边栏并制作主要区域display: block？

应该可以。在印刷媒体中隐藏导航和界面元素总是一个好主意。但如果您真的需要基于网格的布局，请随意使用表格。就我而言，它仍然是最好的网格。在 HTML 5 中，如果添加 role="presentation" 属性，则使用表格进行布局是完全合法的。