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

Question

我正在构建一个 web 应用程序，它基本上由一个大表单组成，然后可以在提交后打印。

但是，我的打印文档中的文本似乎从未受到 color 和 font-weight CSS 属性的影响。

这是文档的一小部分，它在屏幕上的样子:

然而，打印时，它最终看起来像这样:

字体是一样的，但出于某种原因没有应用任何样式。 @media print 没有覆盖 CSS 设置，所以它不应该看起来完全一样吗？

为什么我的常规样式没有应用于打印文档(打印文档是指当您单击浏览器的“打印”按钮时出现的文档)？

编辑:根据要求发布一些示例代码来说明我的问题:

@media print {

    html {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 0.9em;
        color: yellow !important;
    }
}

在上面的代码片段中，每个属性都可以正常工作，除了颜色，即使在使用 !important 标签时也是如此。我不知道为什么会这样。

Answer 1

我找到了问题的根源:Bootstrap。

我使用 Chrome 的检查器工具在“仿真”选项卡中查看打印样式，如下图所示:

然后我选择了颜色没有正确应用的元素，这让我找到了这个小 gem :

@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 用一个讨厌的 * !important 组合覆盖了我所有的样式，甚至会覆盖 html {color:黄色 !important} 因为 CSS's specificity rules .

为了解决我的问题，我可以从 Bootstrap 中删除上面的代码片段，或者制作我自己的所有颜色 !important。