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

Question

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

事情是这样安排的。

1.安装

• 使用@media print将打印样式设置在主css文件的末尾。
• 在加载css文件的链接上没有媒体属性。
• 我们在所有打印样式上声明!important
• 打印样式在需要时覆盖屏幕样式(即屏幕样式没有包装在@media screen中)
• Chrome工具中的打印仿真完美地显示打印样式
• 但是，当打印(和/或打印为PDF)时，一些元素会消失。
• 使用“文件”菜单中的“打印”HTML按钮或“打印”时发生问题
• 此问题不在Firefox或Safari中发生。

2.解决问题

• 打印样式用@media only print {}包装
• 所以试着删除像这个@media print {}一样的“只”，但是没有区别
• 如果我不正确地将“只”移到“print”之后，就像下面这样的@media print only {}
• 然后显示一些缺少的打印元素，但另一些则消失。
• 正如其他地方所指出的，在打印样式开始时尝试过这种攻击，但没有成功。 * { -webkit-transition: none !important; transition: none !important; }

欢迎任何帮助或建议。

干杯

本

Answer 1

这个问题是由您的主内容容器类( presenter-notes__main-content )上的CSS声明presenter-notes__main-content引起的。

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

那么，当您的元素太大，无法在单个页面上容纳，但不能跨多个页面拆分时，会发生什么呢？疯狂的东西，就是这样！当然，有些浏览器可能会优雅地降级，只会阻止溢出，但其他浏览器可能会感到困惑，完全删除元素。计算机并不擅长处理矛盾。