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的检查工具在仿真标签中查看打印样式，如下图所示：

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

@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组合覆盖我的所有风格，由于CSS's specificity rules，它甚至会覆盖 html {color: yellow !important}。< / p>

要解决我的问题，我可以从Bootstrap中删除上面的代码段，也可以使用我自己的颜色!important。

Answer 2

我在使用您的代码时没有看到任何问题（为了显而易见而略微修改）：

＆＃13;

＆＃13;

Debug server

＆＃13;

html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 100px;
  color: red !important;
}
@media print {
  html {
    color: yellow !important;
  }
}

＆＃13;

＆＃13;

＆＃13;

我在safari中的打印预览显示文本为黄色（ish 0看起来有点偏绿，但颜色肯定是不红色）。我不确定你发布的地方会撒谎，但不是这个代码。