nagamatsu

IE7以下でbox-sizingを使いたい

IEは8以上で対応のbox-sizingですが、レスポンシブサイトなど制作しているとIE7以下でも使えたら便利な時があると思います。 boxsizing.htcでIE8以上やモダンブラウザと同じような表示を再現できます。

■boxsizing.htc  https://github.com/Schepp/box-sizing-polyfill

まず、boxsizing.htcを読み込む前のIE7の表示です。  読み込み前のIE7

モダンブラウザやIE8以上だとbox-sizingが指定されている事が分かります。  chromeでの表示 IE8の表示

そして、boxsizing.htcを読み込み後のIE7の表示です。  読み込み後の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 

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら