nagamatsuIE7以下でbox-sizingを使いたい
IEは8以上で対応のbox-sizingですが、レスポンシブサイトなど制作しているとIE7以下でも使えたら便利な時があると思います。 boxsizing.htcでIE8以上やモダンブラウザと同じような表示を再現できます。
■boxsizing.htc https://github.com/Schepp/box-sizing-polyfill
まず、boxsizing.htcを読み込む前のIE7の表示です。
モダンブラウザやIE8以上だとbox-sizingが指定されている事が分かります。
そして、boxsizing.htcを読み込み後のIE7の表示です。
使用方法は、boxsizing.htcを任意の階層に置きcssのbehaviorプロパティで呼び出します。 cssに記述するパスはhtmlから見た階層です。 例としてテストページのソースを記載します。
■css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .col01 { width: 500px; background-color: #E7E7E7; border: 4px solid #BFE8F7; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0 0 20px; padding: 0; behavior: url("boxsizing.htc");}.col02 { width: 500px; background-color: #E7E7E7; border: 4px solid #BFE8F7; margin: 0 0 20px; padding: 0;}p { margin: 0; padding: 10px 0;} |
■html
1 2 3 4 5 6 7 8 9 | <div class="col01"> <p>ダミーダミーダミー</p> <p>ダミーダミーダミー</p></div><div class="col02"> <p>ダミーダミーダミー</p> <p>ダミーダミーダミー</p></div> |
IEのみに適用されるため他のブラウザへの影響がありません。 また、HTCファイルの注意点として、サーバの仕様によって動かない事があるそうです。 その場合、.htaccessで「AddType text/x-component .htc」と設定すると良いようです。
【参考サイト】 ・Box Sizing Behavior http://webfx.eae.net/dhtml/boxsizing/boxsizing.html ・エレメントビヘイビア https://msdn.microsoft.com/ja-jp/library/ms531426%28v=vs.85%29.aspx ・HTML Components を使った DHTML Behaviors のスクリプトによる実装 https://msdn.microsoft.com/ja-jp/library/ms532146%28v=vs.85%29.aspx#Enhancements
