ブラウザ間で一貫した要素の幅を確保するにはどうすればよいですか?

要素の幅と box-sizing:** ブラウザーの動作の統一

Web デザインでは、要素の幅がソースになる可能性があります。ブラウザによって解釈が異なるため、混乱が生じる可能性があります。たとえば、Internet Explorer と Firefox は、歴史的にこの側面を異なる方法で処理してきました。

IE のボーダー ボックス モデルと FF のコンテンツ ボックス モデル

伝統的に、Internet Explorer は採用していました。 「ボーダーボックス」モデルでは、要素の幅にパディングとボーダーの両方が含まれます。したがって:

foo {

width: 10em;
パディング: 2em;
border: 1em;
}

要素を幅 10em でレンダリングします。

In対照的に、Firefox およびその他の標準準拠ブラウザーはデフォルトで「コンテンツ ボックス」モデルを使用していました。ここで、要素の幅にはパディングと境界線が含まれていません。したがって、同じ CSS は幅 16em の要素になります:

foo {

width: 10em;
padding: 2em;
border: 1em;
}

達成一貫性

ブラウザ間で動作を調和させるために、開発者は box-sizing プロパティを使用できます。 「border-box」に設定すると:

• {
  box-sizing: border-box;

または:<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

Firefox を含む最新の標準準拠ブラウザ、「ボーダーボックス」モデルの採用を強制される可能性があります。この宣言は、Opera や Chrome などの Webkit ベースのブラウザもサポートします。

ただし、Webkit は宣言を通じて「パディング ボックス」モデルをサポートしないことに注意してください。

以上がブラウザ間で一貫した要素の幅を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。