最新のすべてのブラウザで、HTML <buttons>が古いIE5ボックスモデルに準拠しているのはなぜですか？

Question

私はボタンといくつかのCSSで奇妙な問題を抱えていましたが、高さ=高さ+詰め物がある古いIE5ボックスモデルに準拠しているかのように動作していたことに気付きました。

閲覧した後、私はthis articleに出くわしました。これは私の前提を確認しましたが、なぜこれが当てはまるのか説明しませんでした。

最近のすべてのブラウザ（Firefox、Chrome、IE9）がこのようなボタン要素を扱う理由を知っている人はいますか？そして、誰もが、ボタンの要素が（私が言うことができる限り）それらのブラウザで他の要素を使用するボックスモデルを使用する回避策を知っていますか？

Answer 1

ボタンはこのように動作することは決してありませんでしたが、入力要素を使用せず、すべてのブラウザで同じスタイルに見えるようにするため、div要素を使用することをお勧めします。

button, input[type=button], input[type=submit] 
{ 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 

Here's an example on JSFiddle：

回避策のボタンがdiv要素のような拡張性にするには、div要素のデフォルト値である、content-boxにbox-sizing属性を設定することができます。

Answer 2

<button>はインラインタグと見なされますが、当然W3Cボックスモデルは使用されません。

これは純粋に論理的ですが、私は全く戸惑うことに同意します。今のところ、ブロックタグとは考えられないのはなぜですか？

button { 
 
    width: 100px; 
 
    padding: 0 30px; 
 
} 
 

 
#a { display: inline; } 
 
#b { display: block; } 
 
#c { display: inline; box-sizing: content-box; } 
 
#d { display: block; box-sizing: content-box; }

<button id="a">aaa</button> 
 
<button id="b">bbb</button> 
 
<button id="c">ccc</button> 
 
<button id="d">ddd</button>

Answer 3

この時点でこの質問を尋ねるについて面白いことにJS/CSSコミュニティにおけるハイエンドの人々のいくつかは、このボックスモデルの非常に互換性のあるバージョンを使用して開始しているということです、彼らの生産プロジェクトで。

box-sizing : border-boxは、最新のブラウザを入力と同じように動作させます。
参照：Paul Irish - Border-Box FTW

は直接的な利点は、あなたが実際に非fixed /非absolute配置要素のzインデックスオーバーレイを行うつもりがない限り、負のマージンでプレイすることなく、はるかに速く、すべてを並べることができることです。