サイトの印刷プレビュー時の表示調整でハマったので今後のために記載します。
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には無いようなので断念。