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

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

但是，我的打印文档上的文本似乎永远不会受到

颜色

和

字体重量

CSS属性的影响

以下是文档的一小部分，如屏幕上所示：

但是，在打印时，它的最终外观如下所示：

字体是相同的，但由于某些原因，没有对其应用任何样式。对于

@media print

，我没有覆盖CSS设置，所以它不应该看起来完全一样吗

为什么我的常规样式没有应用于打印文档（我所说的打印文档是指当您单击浏览器的“打印”按钮时显示的文档）

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

@media print {

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

---

在上面的代码片段中，除了颜色之外，每个属性都能正常工作，即使使用

！重要信息

标记。我不知道为什么会发生这种情况。

在使用您的代码时，我没有发现任何问题（为便于显而易见而稍微修改）：

html{
保证金：0；
填充：0；
宽度：100%；
字体大小：100px；
颜色：红色！重要；
}
@媒体印刷品{
html{
颜色：黄色！重要；
}
}

---

红色表示web，黄色表示打印

我找到了问题的根源：引导

我使用Chrome的inspector工具在仿真选项卡中查看打印样式，如下图所示：

然后我选择了颜色应用不正确的元素，这让我找到了这个小宝石：

@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用一个讨厌的

*

覆盖了我所有的风格！重要

combo，它甚至会覆盖一个

html{color:yellow！important}

，因为

---

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

！重要信息

我的样式表大约有2000行，分为几个文档，您想看些什么吗？我已经添加了一个示例来说明我的问题，尽管我在原始帖子中使用的图像没有应用任何@media print查询。我不明白的是，为什么字体似乎默认为标准重量和黑色。如果可以轻松测试的话，可以尝试将CSS和HTML结合到一起吗？Aka，一个模拟HTML页面，用最少的CSS行来复制问题。问题是你的问题可能在任何地方。可能是CSS覆盖了它，可能是内联样式、浏览器行为，可能是打印中缺少

html

元素？试着消除尽可能多的积垢，给我们发一个简明的问题案例。从！重要的是不工作，我会排除CSS覆盖的问题，我没有使用！在我的样式表中的任何其他地方都很重要，但我确实使用引导。内联样式也是一样：我没有。我猜可能是我安装的某个bower或npm包。构建了一个最简单的实现。如果您有

body{color:red；}@media print{body{color:green；}}}

，是否会发生这种情况？感谢您的测试！我在Ubuntu上使用Chrome，这可能是一个系统问题吗？我已经在Mac上用最新的Chrome进行了测试，它也做了同样的事情——它可以工作。可能是您正在运行特定的浏览器。在其他设备上做一些测试，因为你正在运行的特定操作系统和浏览器不太受欢迎，不足以保证找出发生这种情况的原因。我刚刚在mac上做了测试，但我的字体始终是黑色的。这一定是我的代码，但我绝对不知道什么可能会覆盖一个！我的样式表最后一行的重要标志…只是想知道。。。样式表的链接不包含媒体查询，对吗？像

之类的？不，这是最后一个链接（所有属于包的样式都在它之前）。是的，我以前也遇到过同样的问题。一旦你在问题中提到Bootstrap，我就知道问题出在哪里了。很高兴你找到了！我知道这不是一个建设性的评论，但我已经寻找了几个小时的答案，并找到了这个-救生圈！我一辈子都记不起仿真器了——它可以节省我几个小时的时间。无论如何，谢谢！“电子化”选项卡已不存在。目前它被称为“渲染”，然后找到“模拟CSS媒体”复选框。升级到Bootstrap 3.3.7后，我遇到了同样的问题，谢谢你的提示！