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サイト制作

関連記事

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 目次1 まずはhtml2 cssを追加します。3 テキストの背景指定も まずはhtml 何でもいいので適当なクラスか何かあた ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

no image

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。 簡単に設置できるのでお世話になっています。 jQueryのタグ <script> jQuery(function($){ $('.box ...

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

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