divと同じスタイルのボタンが異なるサイズでレンダリングされるのはなぜですか？

Question

私はいくつかのクリック可能な<div>要素とページを持っている、と私はそれが簡単にjQueryを介して、それらを識別できるように、代わりに<button>秒にそれらを変更したいです。しかし、私は<button>秒、彼らのサイズ変更に<div> Sを変更したとき。 （私は固定幅と高さとしてそれらをスタイリングんだけど、div要素はよりもボタンが異なる幅と高さでレンダリング）

は、ここで問題を再現jsfiddleです：http://jsfiddle.net/AjmGY/

は、ここに私のCSSです：

.styled { 
    border: 4px solid black; 
    background: blue; 
    width: 100px; 
    height: 100px; 
} 

そして、私のHTML：

<div class="styled"></div> 
<button class="styled"></button> 

私は同じ大きさの2つのボックスを見ることを期待しますが、下のボックス（<button>）は顕著に小さい。この動作は、私がそれを試着すべてのブラウザで一貫して、両方のWindows（クローム、FireFoxの、IE、オペラ）とAndroid（内蔵のブラウザとイルカ）。

私は、彼らが同じルールを使用してレンダリングの両方（すなわち、それは今でブロック要素だからbuttonがdivようにレンダリングします）が、それは効果がなかったなるかもしれないことを考えて、スタイルにdisplay: block;を追加しようとしました - ボタンは小さいままです。

私は境界線の幅を増やすと、格差は増加します。ボタンのborderは、むしろ上記と<div>と同様にそのwidthを超えたよりも、内部そのwidthであるかのように見えます。

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elementsを：W3Cが言うんが、私の知る限りそれを理解するように、これは、box modelに違反します。

buttonの外枠ではなく、幅と高さの内側に境界線を設定するのは正常/文書化/予想された動作ですか？この行動に頼ることはできますか？

は（それが関連するかどうマイページでは、HTML5のDOCTYPEを使用しています。）

Answer 1

ボタンおよび他の入力コントロールはデフォルトでborder-box modelを使用して描画されます。コンテンツ、パディング、ボーダーはすべて、あなたが宣言した合計widthになります。彼らはまた、デフォルトのスタイルシートに従って、ブラウザによっていくつかのパディングを追加することがよくあります。あなたが引用しているように、これは容認できる行動であり、基準の違反ではありません。単にOSレベルのGUIコントロールのレンダリングに対応するだけです。

button.styled { 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
    padding: 0; 
} 

：あなたのdiv、大きさ、それは（「」オリジナルのW3Cのボックスモデルである）コンテンツボックスモデルに応じて、そのパディングをゼロとしてあなたbuttonが同じサイズであることを取得するには

jsFiddle demo