css - 在 Firefox 和 IE 中打印背景颜色

Question

我在 Firefox 和 IE 中打印背景颜色时遇到了一些问题。对于 Google Chrome，我发现了以下 hack 并且效果很好，但对于 Firefox 和 IE，我什么也找不到。

//Hack for Google Chrome
-webkit-print-color-adjust:exact;

如果有人可以帮助我，我很高兴。

Answer 1

对于打印对话框上的 Firefox，有一个高级或显示详细信息按钮，如果单击该按钮，则在外观下有两个复选框。一种用于打印背景颜色和打印​​背景图像。

Answer 2

* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}

浏览器： Chrome、Safari、FireFox

更多：https ://wiki.csswg.org/ideas/print-backgrounds

Answer 3

对于火狐

color-adjust:exact;

将与-webkit-print-color-adjust:exact;

Answer 4

如果您可以将元素设置为固定的高度/宽度，则可以设置其大小，将 1px 彩色图像放入其中（您希望背景为任何颜色）并使其填充空间。然后，您可以绝对将您的内容放在首位。

<div style="position: relative; width: 100px; height: 100px;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

或者你可以用边框而不是图像做同样的事情：

<div style="position: relative; width: 100px; height: 100px;">
    <div style="width: 0; height: 0; border: 50px solid black;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

（来自这里的原始想法：https ://defuse.ca/force-print-background.htm ）

Answer 5

正如 Spark 所说，这似乎是不可能的，但您有时可以使用宽边框作为解决方法（例如，高度为 0 且边框为 100 像素的 div）。