html - 为什么相同样式的 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 一样呈现，因为它现在是 block 元素)，但这没有效果——按钮仍然更小。

当我增加边框宽度时，差异会增加。看起来好像按钮的 border在里面它的width ，而不是超越它的width与 <div> 一样.据我了解，这违反了 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。他们也经常有一些浏览器根据他们的默认样式表任意添加的填充。正如您所说，这是可以接受的行为，而不是违反标准；它只是为了适应操作系统级 GUI 控件的呈现。

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

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

jsFiddle demo