[解決済み] 要素の幅はパディングを含むか？

質問

Internet Explorer（IE）ではwidthにpaddingが含まれるのに、Firefox（FF）では含まれないようです。

どうすれば両者の動作を同じにすることができますか？

どのように解決するのですか？

• IEでは、以前は、より便利だが非標準的な border-box"。 ボックスモデルです。このモデルでは、要素の幅にはパディングとボーダーが含まれます。例えば
  
  #foo { width: 10em; padding: 2em; border: 1em; }
  
  となる 10em を大きくしています。

• これに対して、標準に忠実なブラウザはすべて、デフォルトで content-box"。 ボックスモデルです。このモデルでは、要素の幅は ではなく には、パディングやボーダーが含まれます。例えば
  
  #foo { width: 10em; padding: 2em; border: 1em; }
  
  は、実際には 16em を広くしています。 10em + 2em 左右のパディング, + 1em 各エッジにボーダーを設定します。

でモダンバージョンのIEを使用している場合 有効なマークアップ , a 良いDoctype そして 適切なヘッダー であれば、規格に準拠することになります。そうでなければ、最近の標準準拠のブラウザに "border-box" を使うように強制することができます。

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

最初の宣言はOperaに、2番目はFirefoxに、3番目はWebkitとChromeに必要です。

何年か前に作った、ブラウザがどのボックスサイズ宣言をサポートしているかをテストするための簡単なテストを紹介します。 http://phrogz.net/CSS/boxsizing.html

ただし、Webkit（Safari、Chrome）では padding-box ボックスモデルを宣言します。