Webサイト制作

投稿日:2018年2月4日 更新日:

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。

例えば、このサイトのレイアウト。
クロームで見るとこんな感じ

クロームでの見え方

まぁまぁ均等に並んでいるように見えます。
でもIE10で見るとこう。

IE10の見え方

おぉ! めちゃめちゃはみ出してます。
ちなみに、htmlタグは全体をlistというクラス名のulでかこい、ひとつひとつをliで作成しています。

<ul class="list">
<li><a href=""><div><img src="" /></div><h3>記事タイトル</h3></a></li>
<li><a href=""><div><img src="" /></div><h3>記事タイトル</h3></a></li>
<li><a href=""><div><img src="" /></div><h3>記事タイトル</h3></a></li>
<li><a href=""><div><img src="" /></div><h3>記事タイトル</h3></a></li>
</ul>

 

IE10向けのプレフィックスも書いてるのにこれほど崩れるとは。
前回同様の要素がはみ出すやつかなーと思ったりしたけどどうも違う。
このレイアウトのズレを解消しようとよく見ていたら、 原因はflexの入れ子でIE10のバグではなかった。

.listにも、.list liにもdisplay:flex;を使っていて、さらにきれいに指定をしていなかったので崩れていました。
.list liにはdisplay:flex;を指定しなくても全く問題なかったのでこの指定を外すだけできれいに表示されましたとさ。

display:flex;、とても便利でよく使いますが使わなくてもいいところまで使う必要はないですね。
すみません。 こんなこともあるかと思い記事にしてみました。

- Webサイト制作

関連記事

no image

画像の拡大表示(ポップアップ)

やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポップアップしたいページに以下のタグを追加する <div id="modal-contain ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...