LoginSignup
2
1

More than 5 years have passed since last update.

印刷プレビュー時のレイアウト崩れ、背景画像表示の問題(IE・Edge)

Posted at

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

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には無いようなので断念。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1