7

我在按钮和一些 CSS 方面遇到了一个奇怪的问题，我注意到它的行为就好像它遵循旧的 IE5 盒子模型，其中高度 = 高度 + 填充。

经过一番浏览后，我发现了这篇文章，它证实了我的假设，但没有解释为什么会这样。

有谁知道为什么所有现代浏览器（Firefox、Chrome、IE9）都这样对待按钮元素？是否有人知道使按钮元素使用（据我所知）那些浏览器中的其他元素使用的框模型的解决方法？

4

3 回答 3

3

我什至从未意识到按钮会以这种方式起作用，但我通常不使用输入元素并选择时尚 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;
}

这是 JSFiddle 上的一个示例。

于 2012-08-03T14:54:14.223 回答
2

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

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

直接的好处是能够更快地排列所有内容，而不必使用负边距，除非您实际上打算对非fixed/非absolute定位元素进行 z-index 覆盖。

于 2012-08-03T15:31:39.417 回答
0

<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>

于 2012-08-03T15:00:20.920 回答