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

Question

已经找到/阅读/尝试过许多关于此的答案，如果解决方案已经发布，那么很抱歉，但 Chrome 无法正确显示打印样式，缺少许多元素(但不是全部)。

事情是这样设置的。

<强>1。设置

• 使用 @media print

在主 css 文件的末尾设置打印样式

• 加载css文件的链接没有media属性

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

• 打印样式会在需要时覆盖屏幕样式(即屏幕样式未包装在 @media screen

• Chrome Dev 工具中的打印仿真完美显示打印样式

• 但是一些元素在打印(和/或打印为 PDF)时会消失

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

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

---

<强>2。故障排除

• 打印样式包装在 @media only print {}

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

• 如果我像这样错误地将“only”移动到“print”之后 @media print only {}

• 然后一些缺失的打印元素显示而其他的消失

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

  * { -webkit-transition: 无!重要； 过渡:无!重要； }

---

欢迎任何帮助或建议。

干杯

本

Answer 1

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

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

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