CSS颜色属性在@media打印上无法正常工作 [英] CSS color property not working correctly on @media print

问题描述

我正在构建一个Web应用程序，该应用程序基本上由一个大表格组成，提交后即可打印.

I'm building a web app which basically consists of a large form which can then be printed after submission.

但是，我的打印文档上的文本似乎从未同时受color和font-weight CSS属性的影响.

However, the text on my print document seems to never be affected by both color and font-weight CSS properties.

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

Here is a small section of the document as it looks like on screen:

但是，在打印时，它最终看起来像这样:

However, when printing, it ends up looking like this:

字体是相同的，但是由于某些原因没有样式被应用到它.我没有@media print的替代CSS设置，所以它不应该看起来完全一样吗?

The font is the same but for some reason no styles are applied to it. I have NO overriding CSS settings for @media print, so shouldn't it just look exactly the same?

为什么我的常规样式没有应用于打印文档(按打印文档，我的意思是单击浏览器的打印"按钮时出现的文档)?

Why aren't my normal styles being applied to the print document (by print document I mean the document that appears when you click your browser's Print button)?

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

Posting some example code to illustrate my problem, as requested:

@media print {

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

在上面的代码段中，即使使用!important标记，每个属性也会正常工作，除了 颜色.我不知道为什么会这样.

In the above snippet, every attribute will work correctly except color, even when using the !important tag. I am at a loss as to why this is happening.

推荐答案

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

I found the source of the problem: Bootstrap.

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

I used Chrome's inspector tools to poke around print styles in the Emulation tab, as you can see on the following picture:

然后我选择了颜色未正确应用的元素，这导致我发现了这个小宝石:

I then selected the element whose color was not being applied correctly, which led me to this little 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组合覆盖了我所有的样式，由于

Bootstrap was overriding all my styles with a nasty * !important combo, which will even override an html {color: yellow !important} because of CSS's specificity rules.

要解决我的问题，我可以从Bootstrap中删除上述代码片段，也可以将所有自己的颜色设为!important.

To solve my problem I can either delete the above snippet from Bootstrap or make all my own colors !important.

这篇关于CSS颜色属性在@media打印上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！