我正在构建一个基本上由大型表单组成的Web应用程序,然后可以在提交后打印.
但是,我的打印文档上的文本似乎永远不会受到颜色和字体粗细CSS属性的影响.
这是文档的一小部分,如屏幕上的样子：
但是,在打印时,它最终看起来像这样：
字体相同但由于某种原因没有应用任何样式.我没有覆盖@media打印的CSS设置,所以它不应该看起来完全一样吗？
为什么我的普通样式不能应用于打印文档(通过打印文档我的意思是单击浏览器的“打印”按钮时出现的文档)？
编辑：根据要求发布一些示例代码来说明我的问题：
@media print {
html {
margin: 0;
padding: 0;
width: 100%;
font-size: 0.9em;
color: yellow !important;
}
}
在上面的代码段中,除了颜色外,每个属性都能正常工作,即使使用！important标记也是如此.我不知道为什么会发生这种情况.
最佳答案
我找到了问题的根源：Bootstrap.
我使用Chrome的检查工具在仿真选项卡中查看打印样式,如下图所示：
然后我选择了颜色没有正确应用的元素,这让我得到了这个小宝石：
@media print {
*,*:before,*:after {
background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s
Box-shadow: none !important;
text-shadow: none !important;
}
// Other code...
}
Bootstrap用一个令人讨厌的*！重要的组合覆盖我的所有样式,因为CSS’s specificity rules,它甚至会覆盖html {color：yellow！important}.
