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 等)の場合、プリンタで印刷しても印刷されず、印刷前のプレビューにも表示されません。
例えば、以下のような例です。
@media print { border-bottom-width: 1pt; /* 印刷向けなので ptで指定 */ border-bottom-color: #000; /* 線色:黒を指定 */ border-bottom-style: dotted; /* 罫線の種類は破線を指定 */ }
このようなコードで印刷用罫線をsfari、FireFox、EDGEで描画した場合、実際の例としては下のように印刷されます。
ところが、同じページをChromeで印刷すると、下のようになり、罫線がいくつか消えてしまいます。1本だけの場合もあれば、複数本が消える場合があります。また、この現象はChromeを再起動しても完全には改善されません。
この現象が発現しているとき、chromeの印刷画面で用紙方向レイアウトを「横」にすると、消えてた線が表示されたり、別の罫線が消失することがあるのも特長です。(下図)
解決法は、線の種類を「solid」に指定すること
2016年11月現在、この現象の完璧な回避法が見つかりません。
検証したところ、CSSにおいて、border-style: solid; することでこの現象をひとまず回避できるようです。破線や点線での描画ができないのは、情報の重み付けに不便ですが、2016年11月現在では、この方法しかないようですね。
この記事へのコメントはありません。