为什么相同样式的 div 和按钮会以不同的大小呈现？

Question

我有一个包含一些可点击的<div> 元素的页面，我想将它们更改为<button>s，以便更容易通过 jQuery 识别它们。但是当我将<div>s 更改为<button>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>

我希望看到两个大小相同的盒子，但底部的盒子（<button>）明显更小。这种行为在我尝试过的所有浏览器中都是一致的，包括 Windows（Chrome、FireFox、IE、Opera）和 Android（内置浏览器和 Dolphin）。

我尝试将display: block; 添加到样式中，认为这可能会使它们都使用相同的规则进行渲染（即，使button 像div 一样渲染，因为它现在是一个块元素），但这有没有效果 - 按钮仍然较小。

当我增加边框宽度时，差异会增加。看起来按钮的border在它的width，而不是像<div> 那样在它的width 之上和之外。据我了解，这违反了box model，尽管 W3C 确实说：

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.

button 的边框位于其宽度和高度的内侧而不是外侧是否正常/记录在案/预期的行为？我可以依赖这种行为吗？

（如果相关，我的页面使用 HTML5 文档类型。）

Answer 1

按钮和其他输入控件默认使用border-box model 呈现；即内容、填充和边框加起来就是您声明的width 总数。它们还经常有一些由浏览器根据其默认样式表任意添加的填充。正如您所引用的，这是可以接受的行为，而不是违反标准；它只是为了适应 OS 级 GUI 控件的呈现。

要使您的 button 与您的 div 大小相同，请根据内容框模型（即“原始 W3C 框模型”）调整大小并将其填充归零：

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

jsFiddle demo