W3c “是否应使用HTML？”；按钮“；和其他东西的盒子型号一样吗？_W3c_Css

W3c “是否应使用HTML？”；按钮“；和其他东西的盒子型号一样吗？

css

W3c “是否应使用HTML？”；按钮“；和其他东西的盒子型号一样吗？,w3c,css,W3c,Css,提到按钮元素和类型为按钮的输入元素，我遇到了一个我认为是bug的行为（在Firefox和Chrome的最新版本中）。但考虑到表单元素通常是w3规则的例外，我想在假设我是对的之前，我会要求验证行为是这样的：在标准模式下，当我向这样的元素添加边框时，边框显示在元素的宽度内。如果我手动将框大小设置为内容框大小设置为内容框大小设置为（使用供应商前缀），则该行为符合我的预期，但当框大小设置为默认值时，它不是内容框大小设置为。如果您不想转到JSFIDLE，以下是源代码： <!doctype html

提到

按钮

元素和

类型为按钮
的输入
元素，我遇到了一个我认为是bug的行为（在Firefox和Chrome的最新版本中）。但考虑到表单元素通常是w3规则的例外，我想在假设我是对的之前，我会要求验证
行为是这样的：在标准模式下，当我向这样的元素添加边框时，边框显示在元素的宽度内。如果我手动将框大小设置为内容框大小设置为内容框大小设置为（使用供应商前缀），则该行为符合我的预期，但当框大小设置为默认值时，它不是内容框大小设置为。如果您不想转到JSFIDLE，以下是源代码：
<!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>


破盒子模型？
身体{
填充：30px；
背景：棕色；
}
div{
位置：相对位置；
}
输入{
背景色：#CCC；
字体系列：Helvetica，Verdana，无衬线；/*是的，我知道Helvetica和Verdana不一样。我不在乎。Arial很烂*/
字号：18px；
字体大小：粗体；
颜色：白色；
文本转换：大写；
边界：0；
宽度：150px；
高度：90px；
保证金：4倍；
}
输入：悬停{
保证金：0；
边框：4倍纯白；
}
输入：活动{
保证金：0；
边框：4倍纯白；
-moz框大小：内容框；
-webkit框大小：内容框；
框大小：内容框；
}

这是正确的行为，还是我偶然发现了一个bug？
显然，这个bug已经报告给了Chrome和Firefox。漏洞在于，在这两种情况下，这些元素的浏览器样式表中都设置了初始值框大小：padding box
。所以从技术上讲，它不是一个默认值（initial！=default）。但是，将这些元素恢复为框大小：content box
的唯一方法是为content box
使用专有的浏览器扩展，因此没有任何真正符合CSS的方法。CSS 2.1不存在框大小调整，专有浏览器扩展对CSS 3无效。
更简单的演示：比较演示：谢谢，@ŠimeVidas，这当然更容易理解。