@media print在Chrome中无法正常工作

Question

已找到/阅读/尝试了很多答案，所以很抱歉，如果解决方案已发布，但Chrome浏览器没有正确显示正确的打印样式，但缺少许多元素（但不是全部）。

以下是设置方法。

1.设置

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

• 有它加载CSS文件的链接没有媒体属性年底

• 我们宣称对所有打印风格!important

• 打印样式会覆盖所需的屏幕样式（即，画面风格不是包裹在@media screen

• 打印仿真在Chrome浏览器开发工具显示打印样式完美

• 但是打印时的一些元素消失（和/或打印到PDF）

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

• 此问题不会在Firefox或Safari

发生种

---

2.故障处理

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

• 所以尝试 '只有' 这样@media print {}但没有什么区别

• 如果删除我错误地将'only'移动到'print'之后这@media print only {}

• 那么一些缺失的打印元素的显示，但其他人消失

• 正如其他地方所指出，试过这个黑客在打印样式开始，但没有运气

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

---

任何帮助或建议将受到欢迎。

干杯

本

Answer 1

这个问题可以通过在你的主要内容容器类，presenter-notes__main-content CSS声明display: inline-block引起的。

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

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