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渲染像 a div，因为它现在是一个块元素），但这没有效果 - 按钮仍然更小。

当我增加边框宽度时，差异会增加。它看起来好像按钮在它border的内部width，而不是在它的上方和外部，width就像<div>. 据我了解，这违反了盒子模型，尽管 W3C 确实说：

用户代理可以为某些用户界面元素（例如，按钮、菜单等）呈现与“普通”元素不同的边框。

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

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

score 10 · Accepted Answer

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

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

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

1 回答 1