为什么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>

我希望看到两个相同尺寸的盒子,但是底盒(the <button>)明显更小.这种行为在我尝试过的所有浏览器中都是一致的,包括Windows(Chrome,FireFox,IE,Opera)和Android(内置浏览器和Dolphin).

我尝试添加display: block;到样式,认为这可能使它们都使用相同的规则渲染(即,使button渲染像一个div因为它现在是块元素),但这没有效果 - 按钮保持较小.

当我增加边框宽度时,差异会增加.它看起来好像按钮的border是内部的width,而不是超出其width作为与<div>.据我了解,这违反了盒子模型,尽管W3C确实说:

用户代理可以与"普通"元素不同地呈现某些用户界面元素(例如,按钮,菜单等)的边界.

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

(我的页面使用HTML5文档类型,如果相关的话.)

Answer 1

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

为了使您button的尺寸与您的div尺寸相同,请根据内容框模型(即"原始W3C框模型")对其进行调整,并将其填充为零:

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

jsFiddle演示