为什么HTML<；按钮>；在所有现代浏览器中都坚持旧的IE5 box模式？

我发现一个按钮和一些CSS出现了一个奇怪的问题，我注意到它的行为似乎遵循了旧的IE5盒子模型，其中高度=高度+填充

经过一番浏览之后，我发现了一个确认了我的假设，但没有解释为什么会这样

---

有人知道为什么所有现代浏览器（Firefox、Chrome、IE9）都这样对待按钮元素吗？还有谁知道有一种解决方法可以让按钮元素使用那些浏览器中的其他元素（据我所知）所使用的长方体模型吗？

我从来没有意识到按钮是这样工作的，但我通常不使用输入元素，而是选择使用与div等价的样式，因为它们在所有浏览器中都更易于设置样式并使外观相同

使按钮像div元素一样缩放的解决方法是将

框大小调整

属性设置为

内容框

，这是div的默认值：

button, input[type=button], input[type=submit]
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

这完全合乎逻辑，但我同意，完全令人不安。现在的问题是：为什么不将其视为块标记

按钮{
宽度：100px；
填充：0 30px；
}
#a{display:inline；}
#b{显示：块；}
#c{显示：内联；框大小：内容框；}
#d{显示：块；框大小：内容框；}

aaa
bbb
ccc
ddd

此时问这个问题的有趣之处在于，JS/CSS社区中的一些高端人士已经开始在他们的生产项目中使用这个盒子模型的非常兼容的版本

框大小：边框框

将使大多数现代浏览器的行为类似于输入。
见：

---

直接的好处是能够更快地排列所有内容，而不必使用负的边距，除非您实际上打算对非

固定的
/非
绝对的
定位元素进行z索引覆盖。
这是IE5框模型，而不是IE6。IE6有一个在标准模式下工作的标准盒子模型的实现，尽管有点缺陷，但IE5根本没有。你在使用什么
DOCTYPE
？另外，对IE6/5的事情感到抱歉，我不是100%确定。我将编辑我的问题我刚刚用和FF14、Chrome 20、Opera 12、IE9、Safari 5（PC）确认了这一点。找到了一种答案：将按钮放在一起是一种非常常见的设计实践，因此它们默认为
内联
。是的，
内联块
将保持元素的内联性质，同时允许将其样式设置为块级元素，但是我不认为任何元素默认为
内联块
。我不认为内联的显示会影响框模型是高度=高度还是高度=填充+边框+height@samsamX我试图将其设置为
display:block
，但它仍然使用意外的长方体模型。在FF14、Chrome 20、IE9、Opera 12和Safari 5（个人电脑）中进行了测试。@一些正确的。。。对不起，我错了！我们必须使用
框大小调整
这是一个JSFIDLE，看看这个答案是否正确。内联级别框与块级别框遵循相同的W3C框模型。某些属性的计算方式可能不同，或者根本不适用于它们，因为它们没有意义（例如
宽度
、
高度
和垂直边距），但它们仍然使用相同的框模型它在IE9、Chrome 20、Opera 12和Safari 5（pc）上运行。并通过添加
-moz框大小：内容框它也适用于FF14。适用于除IE7之外的所有版本！谢谢：）是的，我也听说过类似的事情，我最近才发现旧的盒子模型存在（IE5）。那篇文章看起来确实很有趣，以后会把它放在一边看的！