Html 为什么具有相同样式的div和按钮以不同的大小渲染？

我有一个包含一些可单击的

元素的页面，我想将它们改为

s，以便通过jQuery更容易识别它们。但是当我将

s更改为

s时，它们的大小会改变。（我将它们设置为固定宽度和高度，但按钮渲染的宽度和高度与div不同。）

下面是一个重现问题的JSFIDLE：

以下是我的CSS：

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

和我的HTML：

<div class="styled"></div>
<button class="styled"></button>

我希望看到两个大小相同的盒子，但底部的盒子（

）明显更小。这种行为在我试用过的所有浏览器中都是一致的，包括Windows（Chrome、FireFox、IE、Opera）和Android（内置浏览器和Dolphin）

我尝试添加

display:block到样式，认为这可能会使它们都使用相同的规则进行渲染（即，使
按钮
像
div
一样渲染，因为它现在是块元素），但这没有效果——按钮仍然较小

随着边界宽度的增加，差异也会增加。它看起来像按钮的
边框
在其
宽度
内，而不是像
一样在其
宽度
以上。据我所知，这违反了法律，尽管W3C确实说：


按钮的边框在其宽度和高度的内侧而不是外侧，这是正常的/记录的/预期的行为吗？我能相信这种行为吗

（我的页面使用HTML5 doctype，如果相关的话。）
按钮和其他输入控件默认使用；i、 e.内容、填充和边框加起来就是您声明的总宽度。它们还经常由浏览器根据默认样式表任意添加一些填充。正如您所引用的，这是可以接受的行为，而不是违反标准；这只是为了适应操作系统级GUI控件的呈现

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

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

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