Loading...
忘れないようにメモ

IE9でflex-wrapが使えない問題に悩まされる。

IE9問題に悩まされる日々を過ごしております。

display:flexが真っ直ぐになったりしてレイアウト崩れを起こす

下記サイトを参考にいたしました。
—————–
http://blog.cror.net/flexibility.html
—————–

まず、display:flexを直す

まず、flexibility.jsをダウンロードしてきます。
(フォルダの一番上にいるよ~)
—————–
https://github.com/jonathantneal/flexibility
—————–

任意の場所に下記を挿入。

そして、display:flexを利用するところに

-js-display: flex;を挿入します。

これでIE9はオッケーだと思います。

できた!と喜んでたのも束の間…

できた!と思って、display:flexのところにガパガパ入れていったんですよ。

そしたら、何か所か画面からはみ出ている!!

うぉおぉおおい!

何も考えずにやるってよくないね。

ということで、見直し。

flex-wrap:wrapはdisplay:inline-blockで対応

wrapはIE9では対応していないようです。

その為、display:inline-blockで対応しました。

marginとかtext-alignは自由に書いてね。

スタイルは下にあるものが適用されるので、flex-boxに対応しているものはflexが動きます。

しかし、IE9以下はflex-boxがないので、blockが適用されます。

これで何とか解決。

cssハックを使って書く場合もあります。

その時々に応じて書いたらいいかな。

IE9にも対応できたので、display:flexを多用します!!!!!

%d人のブロガーが「いいね」をつけました。