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

我有一个可点击的页面 <div> 元素，我想将它们改为 <button>而是通过jQuery更容易识别它们。但是当我改变了 <div>去 <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而不是超越它 width 和。一样 <div>。据我了解，这违反了盒子模型虽然W3C确实说：

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

是a的正常/记录/预期行为 button 将它的边界放在宽度和高度的内侧，而不是在外面？我能依靠这种行为吗？

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

947

2017-12-06 04:27

起源

按钮和其他输入控件使用边框模型默认;即内容，填充和边框都加起来 width 你宣布的。它们还经常根据浏览器的默认样式表随意添加一些填充。正如你所说，这是可以接受的行为而不是违反标准;它只是为了适应操作系统级GUI控件的渲染。

得到你的 button 和你的一样大小 div，根据内容框模型（“原始W3C盒子模型”）调整大小，并将其填充为零：

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

2017-12-06 04:37

你能依靠这种行为保持一致吗？我不知道你是否可以，但如果我自定义我的控件，我不会。 - BoltClock♦

得到你的 button 和你的一样大小 div，根据内容框模型（“原始W3C盒子模型”）调整大小，并将其填充为零：

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

2017-12-06 04:37

你能依靠这种行为保持一致吗？我不知道你是否可以，但如果我自定义我的控件，我不会。 - BoltClock♦

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