IE9問題に悩まされる日々を過ごしております。
display:flexが真っ直ぐになったりしてレイアウト崩れを起こす
下記サイトを参考にいたしました。
—————–
http://blog.cror.net/flexibility.html
—————–
まず、display:flexを直す
まず、flexibility.jsをダウンロードしてきます。
(フォルダの一番上にいるよ～)
—————–
https://github.com/jonathantneal/flexibility
—————–
任意の場所に下記を挿入。
|
1 2 3 4 5 6 7 8 |
<!--[if lte IE 9]> <script src="js/flexibility.js"></script> <script> $(function(){ flexibility(document.documentElement); }); </script> <![endif]--> |
そして、display:flexを利用するところに
-js-display: flex;を挿入します。
例
|
1 2 3 4 |
.flex-all { -js-display: flex; display: flex; } |
これでIE9はオッケーだと思います。
できた！と喜んでたのも束の間…
できた！と思って、display:flexのところにガパガパ入れていったんですよ。
そしたら、何か所か画面からはみ出ている！！
うぉおぉおおい！
何も考えずにやるってよくないね。
ということで、見直し。
flex-wrap:wrapはdisplay:inline-blockで対応
wrapはIE9では対応していないようです。
その為、display:inline-blockで対応しました。
|
1 2 3 4 5 6 7 8 9 |
.flex-all { display: block; display: flex; flex-wrap:wrap; } .flex-all .flex-box { display: inline-block; width:20%; } |
marginとかtext-alignは自由に書いてね。
スタイルは下にあるものが適用されるので、flex-boxに対応しているものはflexが動きます。
しかし、IE9以下はflex-boxがないので、blockが適用されます。
これで何とか解決。
cssハックを使って書く場合もあります。
その時々に応じて書いたらいいかな。
IE9にも対応できたので、display:flexを多用します！！！！！