Currently browsing category

Webデザイン

ChromeでCSS・borderによる線が印刷できない

Googleが配布するWebブラウザ「Chrome」で、CSSで指定した罫線が印刷できない場合があり、おそらくバグと思われます。WIndows / OS X(macOS)双方のバージョン 54.0.2840.98 以前のChromeで発現し、他のブラウザ(EDGE、safari、FireFox)では見られない現象です。(2016年11月現在)

boeder-style: solid 以外の場合に発現する

具体的には、印刷時のみCSSを適用するメディアクエリー @media print 内で指定した border-style や border による 線種の値が、solid 以外(dotted、dashed 等)の場合、プリンタで印刷しても印刷されず、印刷前のプレビューにも表示されません。

例えば、以下のような例です。

このようなコードで印刷用罫線をsfari、FireFox、EDGEで描画した場合、実際の例としては下のように印刷されます。

safari_border

ところが、同じページをChromeで印刷すると、下のようになり、罫線がいくつか消えてしまいます。1本だけの場合もあれば、複数本が消える場合があります。また、この現象はChromeを再起動しても完全には改善されません。

chrome_border

この現象が発現しているとき、chromeの印刷画面で用紙方向レイアウトを「横」にすると、消えてた線が表示されたり、別の罫線が消失することがあるのも特長です。(下図)

safari_border02

解決法は、線の種類を「solid」に指定すること

2016年11月現在、この現象の完璧な回避法が見つかりません。

検証したところ、CSSにおいて、border-style: solid; することでこの現象をひとまず回避できるようです。破線や点線での描画ができないのは、情報の重み付けに不便ですが、2016年11月現在では、この方法しかないようですね。