css - Firefox と IE での背景色の印刷

Question

Firefox と IE で背景色を印刷するのに問題があります。Google Chrome の場合は次のハックが見つかり、うまく機能しますが、Firefox と IE の場合は何も見つかりません。

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

誰かがこれを手伝ってくれたらうれしいです。

Answer 1

要素の高さ/幅を固定しても問題ない場合は、そのサイズを設定し、1 ピクセルのカラー画像を (背景にしたい色の) 入れて、スペースを埋めることができます。そうすれば、コンテンツを一番上に配置できます。

<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 2

Spark が言うように、不可能に思えますが、回避策として幅の広い境界線を使用できる場合があります (例: 高さ 0 で境界線 100px の div)。