【対策あり】flexboxを使用したページをIEで印刷すると改ページで要素が消える

  • はてブ

現象

flexboxを使用したページをIEで印刷すると改ページで要素が消える、というバグに遭遇しました。
最新のIE11でも再現したので、おそらくIEのバージョン関係なく起こっているかと思います。

img
このように1ページ目は平気なのですが、flexboxを使用した要素が改ページ後に真っ白になってしまいます。


対策

印刷用のcssの設定でflexbox部分の代わりにfloatinline-blockを使用します。

作りによっては高さが揃わない等の悩みが出てくるかもしれませんがmin-heightあたりをうまく使用してもらえればある程度はきれいに見せられるかな、と思います。





古いIEでflexboxが使えないのはわかっていたのですが、最新バージョンのIEで印刷面とはいえこんな現象が起きるとは…。

参考になりましたら幸いです。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ