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

Question

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

以下是设置方式。

1。 SETUP

• 使用@media print

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

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

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

• 打印样式会覆盖所需的屏幕样式（即屏幕样式未包含在@media screen

中

• Chrome Dev工具中的打印模拟完美显示打印样式

• 但是在打印（和/或打印到PDF）

时，某些元素会消失

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

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

2。故障排除

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

中

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

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

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

• 正如其他地方所述，在打印样式的开始尝试了这个黑客，但没有运气

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

欢迎任何帮助或建议。

干杯

本

Answer 1

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

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

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