Kei*_* L. 18 css printing google-chrome google-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"但没有任何变化.
小智 11
在打印样式表中,您需要添加以下内容:
* {
transition: none !important;
}
Chrome似乎不会禁用打印介质的过渡属性.
这是我找到答案的地方.
如果您没有在给定的答案中找到解决方案，那么我有话要说：
在 Chrome DEVToolsprint选项中emulation css media ，仅用于将打印 css 规则应用于页面，出于测试目的，它不考虑与打印一起进行的所有其他事情，它显示打印预览，但有时它不会将打印页面显示为实际打印预览。
如果您正在使用 bootstrap 那么如果您只使用它col-md-*或者col-sm-*它不会工作，但是如果您使用col-xs-*那么它将起作用，因为问题是页面本身在像素方面很小，所以 bootstrap 认为它需要应用 xs 样式.
不同的浏览器在打印页面时的行为不同。测试打印的唯一最佳方法是实际打印或打印为pdf。
| 归档时间： |
|
| 查看次数： |
5215 次 |
| 最近记录： |