web-dev-qa-db-ja.com

IE7でのボックスサイズのサポート

box-sizing: border-box私にとってクロスブラウザのレイアウトの問題を解決するCSSプロパティ。

私が現在抱えている唯一の問題は、IE7がそれをサポートしていないように見えることです。 IE7をサポートするためのハックはありますか？

csscss3internet-explorer-7
47
lowellk

これを行うにはいくつかの方法がありますが、完璧な方法はありません。

あなたが指摘するように：

  • Firefox/Opera/Safari/Chrome/IE8 +は、box-sizingプロパティを認識し、境界ボックスを使用できるようにします。
  • IE6はデフォルトで旧式の（正しい？）境界ボックスモデルを使用します。
  • ただし、IE7は標準モードではW3Cパディングボックスモデルを使用し、CSSボックスサイズプロパティを認識しないため、境界ボックスモデルに戻す方法はありません。 IE7をサポートする必要がある場合（おそらくまだサポートしている場合）、次の4つのオプションのいずれかにこだわっています。

1.条件付きコメント：

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

IE8および9でボックスサイズを使用し、IE7で特定のオーバーライドを行います。このオプションは手間がかかります。

2.シェップボックスサイジングポリフィル：

https://github.com/Schepp/box-sizing-polyfill

この優れたPolyfillは、IE6および7の既定のブラウザーの動作を変更するHTCファイルであり、W3Cボックスモデルを使用します。軽度の使用には適していますが、広範囲に使用すると問題が生じる可能性があります。注意してテストして使用してください。

3.古いスタイルのネストされたDiv：

古いスタイルのネストされたdivアプローチは、まだ素晴らしい方法です。

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

セマンティックではないネストされたdivは、間接的にパディングを提供しますが、マークアップが乱雑になるという欠点があります。明らかにインラインスタイルを使用しないでください。ここでは、説明のためにインラインスタイルを使用しています。

古い格言固定幅の要素でパディングを使用しないでください。

4.優先ソリューション-直接の子セレクター：

他の方法は、直接の子セレクターを使用することです。いくつかのコンテンツを含む固定幅のdivがあるとします：

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

次に、divのすべての直接の子に左マージンと右マージンを追加するルールを記述できます。

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

これにより、h1とpにわずかなマージンが追加されますが、ネストされたemには追加されず、コンテンツdivに20pxのパディングが表示されますが、ボックスモデルのバグは発生しません。

5. IE7サポートの廃止を検討する

IE7は、ボックスサイズプロパティを認識しない最後のブラウザーです。 IE7からのトラフィックが少ない場合は、mightサポートの削除を検討してください。あなたのCSSはもっと良くなります。

2013年後半の時点で、これが私の推奨オプションです。

2017 EDIT：IE7のサポートを現在廃止し、border-boxを使用するのはおそらく過去のことです。

102
superluminary

ポリフィルを使用していくつかのアイテムで機能させることができますが、私の入力フィールドでは機能しませんでした。

https://github.com/Schepp/box-sizing-polyfill

box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);

動作URLは、CSSファイルではなくページに関連していることに注意してください。サイトのルートへの相対パスを使用します（URLをスラッシュで開始し、そこから移動します）。

17
neojp