アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

Web制作

【Web制作】IE11でFlexboxが横並びにならなくてハマる

スポンサードリンク

投稿日:

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました…
事前にIEはチェックしなくて良いと聞いていたので油断してましたね。

結論としては
「display: flex;」の記述が抜けていたこと。

IEだしdisplay:-ms-flex
を書いておけば良いものだと勘違いしていたんですね。

IE11ではdisplay:-ms-flex;が読み込まれずにいて、
そもそもの「display: flex;」が抜けているとflexboxレイアウトができない
という初歩ミスにハマってしまいました。

-ms-flexをIE11が読み込んでいない

-ms-flexをIE11が読み込んでいない

.devWrap{
display: -moz-flex: // firefox
display: -webkit-flex; //Android2.3~,Chrome,Safari等
display: -ms-flexbox; //IE9~用
display: flex; //最新のブラウザ向け
}

レイアウト崩れしたCSS

IE11に対応させたCSS

マイクロソフトがIEは使わないで〜と公表していましたが、お客さん側は関係ないですもんね。
まだWindows7やもしかしたらWindows Vista,Windows XPを使っている可能性も無きにしもあらず。

私達が持っている情報がお客さんも知っていると当然のように思い込みがちですが、
IEを使わなくなっているなんてのは我々の都合でしかありません。
マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」 - Engadget 日本版

スポンサードリンク

結論

IE嫌い。

【Web制作】IE11でFlexboxが横並びにならなくてハマる

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「 ...

スポンサードリンク

-Web制作
-, ,

Copyright© さくらいらぼ , 2019 All Rights Reserved.