css - 尝试调试媒体打印

Question

我正在尝试在 Chrome 中调试媒体打印样式表。为此，我遵循了推荐的做法，并选中了开发人员工具设置下的“模拟 css 媒体打印”框。

不幸的是，这没有按预期工作:页面在浏览器中看起来不错，但是一旦我切换到打印预览或实际打印，结果就不同了。 我的页面很复杂，样式表重叠，我无法在 jsfiddle 上的更简单场景中重现该问题。

我的问题:这是 Chrome 开发者工具的已知问题吗？如果是这样，是否有任何解决方法可以帮助我调试媒体打印样式表？

更具体地说，我的问题与背景颜色有关。

Answer 1

好的，我想我找到了发生这种情况的原因。

默认情况下，浏览器设置为忽略打印背景色。但是，当我模拟 css 媒体打印时，Chrome 似乎没有考虑此类浏览器设置。

现在我知道在哪里查看，问题很容易重现:

http://jsfiddle.net/rK7aX/

@media print {
  div {background-color:green;}
}

在上面的示例中，打印预览将具有白色背景。带有模拟媒体打印的浏览器 View 将显示绿色文本背景。