PIYO - Tech & Life -

トップページの表示がIEで壊れていたので直しました

ブログ css IE

IEでのトップ画面の表示がこのザマでした。各記事のカードみたいなのが潰れちゃってます。

Google Analyticsによると5%程度 IEからの閲覧があるようです。

まあ直接個別記事へ来ることがほとんどでしょうからトップページは見てないかもしれませんが、気持ち悪いので直すことにしました。

潰れている箇所のスタイルにflex: 1;なる指定があったので、まあほぼこれだろうとあたりをつけました。

IE11はflexboxに対応しているものの、挙動がおかしいことで有名です。先日も仕事のプロジェクトで遭遇して対応したことがあるのでなんとなくわかっていました。

ちなみにそのとき参考にしたのはこちらのQiita記事です。

flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita
flexbox使ってますか?バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。 Solved by Flexboxの作者でもある、philipwaltonさんのflexbu...

今回はこのページのこの項目に類似するものだったと思われます(多分)。

アイテム潰れる問題(Safari)

flex: 1;

↓

flex: 1 auto;

とすることで修正できました。