IE7以下で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　

.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　

<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