web-dev-qa-db-ja.com

Firefoxで背景色を印刷してIE

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

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

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

cssgoogle-chromefirefoxbackground-color
19
Wellington Zanelli
* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}

ブラウザ：Chrome、Safari、FireFox

詳細： https://wiki.csswg.org/ideas/print-backgrounds

3
Pavel Levin

Firefoxの場合、[印刷]ダイアログに[詳細設定]または[詳細の表示]ボタンがあり、それをクリックすると、[外観]の下に2つのチェックボックスがあります。 1つは背景色の印刷と背景画像の印刷用です。

3
EGHM

要素の高さ/幅を固定しても問題がない場合は、サイズを設定し、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 ）

1
voidstate

Firefoxの場合

color-adjust:exact;

-webkit-print-color-adjust:exact;と同じように機能します

1
harsha motwani

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

0
TheZver