1
typeがbuttonのbutton要素とinput要素の両方を参照すると、私は最近のFirefoxとChromeの両方のリリースでバグだと思われる動作を実行しました。しかし、フォームの要素がw3のルールであると思われるものの例外であることを考えれば、私は正しいと前に検証を求めるだろうと思った。HTMLの "ボタン"は他のものと同じボックスモデルですか？
動作は次のとおりです。標準モードでは、そのような要素に境界線を追加すると、境界線が要素の幅内に表示されます。 box-sizingを手作業でcontent-box（ベンダープレフィックスを使用）に設定した場合、予想どおりの動作になりますが、box-sizingがデフォルトののままの場合、content-boxではありません。 Here's a jsfiddle example。
<!doctype html>
<html>
<head>
<title>Broken box model?</title>
<style>
body {
padding: 30px;
background: brown;
}
div {
position: relative;
}
input {
background-color: #CCC;
font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */
font-size: 18px;
font-weight: bold;
color: white;
text-transform: uppercase;
border: 0;
width: 150px;
height: 90px;
margin: 4px;
}
input:hover {
margin: 0;
border: 4px solid white;
}
input:active {
margin: 0;
border: 4px solid white;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<input type="button" value="I am a button" />
</div>
</body>
</html>
はこの正しい動作です、または私はバグにつまずいている：あなたはjsfiddleに行きたくない場合は、ここではソースコードですか？
**簡単なデモ：** http://jsfiddle.net/w2eBW/3/ –
**比較デモ： * http://jsfiddle.net/w2eBW/5/ –
ありがとう、@ŠimeVidas、それは確かに理解しやすいです。 – kojiro