サイトの印刷プレビュー時の表示調整でハマったので今後のために記載します。

IE11で閲覧した時のバグ

改ページで要素が消える

Grdというflexboxのフレームワークを使って、カード型レイアウトを実現していたが、印刷プレビューの2ページ目からその要素が表示されないという現象が起こった。これは、行ごとにGridクラスを振ってやることで解消。

svgのアイコンが表示されない

chrome、firefoxだと問題なかったが、IE（Edge含む）で閲覧すると見出しの頭に:beforeで追加していたsvgアイコンが表示されなかった。高さを指定していなかったことが原因のようで、ブラウザによって差異が出るらしい。

2カラム要素のカラム落ち

これもIE11での現象（IE10以前は未確認）になるが、flexboxを使った2カラム要素でカラム落ちが発生（印刷プレビューのみ）。該当箇所で使われていたGrdのsassを確認したところ、width: calc(100% * 6 / 12);になっており、calc()を使わずそのまま100% * 6 / 12に修正してやることで、無事カラム落ちも解消されました。計算結果は同じ50%のはずなのですが、どうもIEでは解釈が異なるっぽい。

Edge

背景画像が表示されない。調べたところ、そもそも背景画像を表示させるように設定する項目がEdgeには無いようなので断念。