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


