Question

我有一个奇怪的问题，一个按钮和一些CSS，我注意到它表现得好像它坚持旧的IE5盒子模型，其中height = height + padding。

经过一番浏览后，我遇到this article这证实了我的假设，但没有解释为什么会这样。

有人知道为什么所有现代浏览器（Firefox，Chrome，IE9）都会对待这样的按钮元素吗？有没有人知道一个解决方法，让按钮元素使用盒子模型（据我所知）这些浏览器中的其他元素使用？

Answer 1

我从来没有意识到按钮是这样做的，但我通常不使用输入元素并选择时尚div，因为它们更容易设计风格并且在所有浏览器中看起来都相同。

使按钮像div元素一样缩放的解决方法是将box-sizing属性设置为content-box，这是div的默认值：

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

Here's an example on JSFiddle

Answer 2

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

box-sizing : border-box会使大多数现代浏览器的行为与输入相似请参阅：Paul Irish - Border-Box FTW

直接的好处是能够更快地排列所有内容，而不必使用负边距，除非你真的打算做非fixed /非absolute的z-index叠加定位元素。

Answer 3

<button>被视为内联标记，然后它自然不使用W3C框模型。

这纯粹是合乎逻辑的，但我同意，完全令人不安。现在的观点是：为什么它不被视为块标记？

button {
    width: 100px;
    padding: 0 30px;
}

#a { display: inline; }
#b { display: block; }
#c { display: inline; box-sizing: content-box; }
#d { display: block; box-sizing: content-box; }

<button id="a">aaa</button> 
<button id="b">bbb</button>
<button id="c">ccc</button>
<button id="d">ddd</button>

为什么HTML <buttons>在所有现代浏览器中都遵循旧的IE5盒子模型？</buttons>

3 个答案: