サイト制作メモ

投稿日: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;、とても便利でよく使いますが使わなくてもいいところまで使う必要はないですね。
すみません。 こんなこともあるかと思い記事にしてみました。

- サイト制作メモ

関連記事

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

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

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <heade ...

no image

サイト制作に役立つTips_リンク集

スタイルなどの装飾 ボタンのホバーアニメ。 バリエーションが豊富です。デザインのヒントに 【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ 見た目で調節したらプレフィックスまで書いてくれ ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

翻訳する