Internet Explorer でのレイアウト調整

Internet Explorer 10 にて当サイトのレイアウトを確認し、調整しました。 Internet Explorer 10 での flexbox の実装は、2012年3月22日版の「Flexbox」草案に基づい […]

Internet Explorer 10 にて当サイトのレイアウトを確認し、調整しました。

Internet Explorer 10 での flexbox の実装は、2012年3月22日版の「Flexbox」草案に基づいているそうです。

Internet Explorer 10 用の flexbox コンテナーの CSS は以下のように設定しています。

 display: -ms-flexbox ;
 -ms-flex-direction: row ;
 -ms-flex-align: start ;
 -ms-flex-pack: center ;
 -ms-flex-wrap: wrap ;

そして、flexbox の子要素の CSS は以下のように設定しています。

 -ms-flex: none ;

また、IE 9 以下に向けて、インラインブロックを利用しています。

 display: inline-block ;
 /display: inline ;
 /zoom: 1 ;

グラデーションやシャドーの効果は見ることができませんが、ワイヤーフレームのレベルからみると構想通りの表示となりました。