PIYO - Tech & Life -

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

ブログ css IE

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

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

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

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

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

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

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

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

flex: 1;



flex: 1 auto;

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