Question

我有一个包含一些可点击的<div>元素的页面，我想将它们更改为<button>，以便通过jQuery更容易识别它们。但是当我将<div>更改为<button>时，它们的大小会发生变化。（我将它们设置为固定的宽度和高度，但按钮呈现的宽度和高度与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，而不是像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

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

1 个答案: