CSS颜色属性在@media print上无法正常工作

我正在构建一个基本上由大型表单组成的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}.

为了解决我的问题,我可以从Bootstrap删除上面的代码片段或者制作我自己的颜色！重要.

原文地址：https://www.jb51.cc/css/427381.html