IEでのみcssがうまく効かず、遭遇した問題の数々

コーディングをしていて、chrome,firefox,edgeでは全く表示が崩れないのに、IEで見た時だけとんでもない崩れ方をすることがあります。

ここでは忘備録として記事を書いておきますので、もしもっとわかりやすく書いてほしいなどの要望があればコメントください。

記事を作ります。

１、IEでフレックスコンテナー内の写真が縦にびよ～んと伸びる問題

今回私がはまったのが、写真が縦にびよーんと伸びる問題でした。

こんな感じです。

この写真のimgファイルが入っているコンテナーに以下を追加したところ、解決しました。

.profile_image { flex-shrink:0; 　}

改善後

次にIEだけ、文字の改行がされず、ひたすら一行で表示されてしまう問題です。

上がgoogle chromeの表示、下の画像がIEの表示です。

これはフレックスボックスのバグが原因でした。

IEではフレックスコンテナーの中の要素にはmax-width: 100%;を指定しないと、上記の画像のように親要素をはみ出してしまうみたいです。

下記のようにmax-width: 100%を書き加えたところ、きちんと改行が反映されました。

. p { padding-bottom: 1.5vw; font-size: calc(1rem + 0.8vw); color: rgb(54, 54, 54); max-width: 100%;}

以下、改善後の画像です。

これもスクショを載せます

この場合、フレックスコンテナーが入っている、divに対しwidth: 100%;を指定したら、解決しました。

これはフレックスコンテナーではない、画像が縦に伸びてしまう問題です。

imgにheight: auto;を追記したら修正できました。モダンブラウザはいちいちheight: auto;などと書かなくても自動的にレイアウトを適切にしてくれるのですが、、、

IEはダメな子なのでわざわざ書かなくてはいけないようです。

いろいろ紹介しました。

IEのバグは、「こうすれば表示が正常になる」という決まったルールはなさそうなので、非常にやっかいですね。

毎回いろいろ試行錯誤しながら修正していくしかなさそうです。