mysite

2020年4月26日
プログラミング

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

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

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

記事を作ります。

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

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

こんな感じです。

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

.profile_image {      flex-shrink:0;   }

改善後

IEだけ文字の改行がされなず、重なって標準

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

上がgoogle chromeの表示、下の画像が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%;}

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

IEでの表示(修正後)

フレックスボックスを使ったとき、中身がド派手にコンテナーを飛び出す

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

グーグルクロムの表示

IEの表示(フレックスボックスの中身が派手に飛び出してます。)

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

画像が縦にびよーんと伸びる

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

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

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

いろいろ紹介しました。

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

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