HTML“按钮”是否应该与其他所有内容具有相同的框模型？答案

【问题标题】：Should HTML "buttons" have the same box-model as everything else?HTML“按钮”是否应该与其他所有内容具有相同的框模型？
【发布时间】：2011-12-28 04:53:12
【问题描述】：

引用button 元素和input 元素与type 或button，我遇到了我认为是错误的行为（在最近的Firefox 和Chrome 版本中）。但考虑到表单元素通常是我认为的 w3 规则的例外，我想我会在假设我是对的之前要求验证。

行为是这样的：在标准模式下，当我为这样的元素添加边框时，边框出现在元素的宽度内。如果我手动将box-sizing 设置为content-box（使用供应商前缀），则行为符合我的预期，但是当box-sizing 保留为默认值时它不是content-box。 Here's a jsfiddle example。如果你不想去 jsfiddle，这里是源代码：

<!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.net/w2eBW/3
比较演示： jsfiddle.net/w2eBW/5
谢谢@ŠimeVidas，这当然更容易理解。

标签： w3c css

【解决方案1】：

显然这个错误已经报告给 Chrome 和 Firefox。漏洞在于，在这两种情况下，这些元素的浏览器样式表中都设置了一个 initial 值box-sizing: padding-box。所以它在技术上不是一个默认值（初始！=默认）。然而，将这些元素恢复为box-sizing: content-box 的唯一方法是使用content-box 的专有浏览器扩展，因此没有任何真正符合CSS 的方法可以做到这一点。 CSS 2.1 不存在 box-sizing，并且专有的浏览器扩展不是有效的 CSS 3。

【讨论】：