css - Chrome 打印预览与 DEVTools 中的不同

我已经设置了打印样式表，在 Firefox 中它看起来不错。

在 Chrome 中，整个页面在打印预览 (CTRL+P) 中损坏，但如果我打开 Chrome DEVTools (F12) 并使用 emulate CSS media功能页面看起来正确 - 就像在 firefox 中一样。

奇怪的是，如果我再次打开打印预览，在我激活一次模拟选项后，页面在打印预览中看起来正确!即使我只是激活然后停用模拟选项，执行此操作后打印预览始终正确!

我的 print.css 开始于

@media print { ... }

并包含在页面 <head> 中像这样:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

我试图删除 media="print"但没有任何变化。

最佳答案

在您的打印样式表中，您需要添加以下内容:

* {
    transition: none !important;
}

Chrome 似乎没有禁用打印媒体的过渡属性。

Here是我找到答案的地方。

关于css - Chrome 打印预览与 DEVTools 中的不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26011254/