爲什麼div和具有相同樣式的按鈕呈現不同的大小？

我有一個帶有一些可點擊的<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>

我希望看到相同大小的兩個箱子，但底部框（在<button>）明顯更小。在Windows（Chrome，FireFox，IE，Opera）和Android（內置瀏覽器和Dolphin）上，我嘗試使用的所有瀏覽器的行爲都是一致的。

我嘗試添加display: block;的風格，認爲這可能使他們既渲染使用同樣的規則（即，使01呈現像div因爲它是一個塊元素現在），但沒有任何效果 - 按鈕保持較小。

隨着我增加邊框寬度，視差增加。它看起來好像按鈕的border是裏面的它的width，而不是width之上，並且與<div>一樣超出其width。據我瞭解，這違反了box model，雖然W3C確實說：

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements。

是正常/記錄/預期的行爲爲button有它的邊界在其寬度和高度的內部，而不是外部的？我可以依靠這種行爲嗎？

（我的頁面使用了HTML5的doctype，如果這是相關的。）

來源

2011-12-06 Joe White

按鈕和其他輸入控件使用的是border-box model默認渲染;即內容，填充和邊框全部合計到您聲明的總數width。他們通常還會根據瀏覽器默認的樣式表添加一些填充。正如你引用的，這是可以接受的行爲，而不是違反標準;它只是簡單地適應渲染OS級別的GUI控件。

要根據內容盒模型（這就是「」原來W3C盒模型），它讓你的button是大小相同的div，大小和零出它的填充：

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

jsFiddle demo

來源

2011-12-06 04:37:29 BoltClock

你能依靠這種行爲來保持一致嗎？我不知道你是否可以，但如果我正在定製我的控件，我不會。 – BoltClock

爲什麼div和具有相同樣式的按鈕呈現不同的大小？

回答

相關問題