隨着提交元素相比，div

當我有一個提交/按鈕元素，我分配一個固定的，填充是從寬度中減去。當我將它應用到一個普通的div元素時，填充被添加到寬度。隨着提交元素相比，div

有人可以指出我在何處解釋這種行爲嗎？

.green_submit { 
    color: #fff; 
    background-color: #94c909; 
    padding: 25px; 
    width: 200px;

}

<input type="submit" class='green_submit' value="Validate" />

將導致146px的寬度。

<div class="green_submit"></div>

將導致200像素

http://jsfiddle.net/nnnS3/29/

來源

2013-05-13 YesMan85

寬度的box-sizing不是兩者之間是一致的。使用box-sizing: border-box在寬度中包含填充和邊框。

http://jsfiddle.net/nnnS3/30/

或者，使用content-box兩個（但<div>沒有邊框）：

http://jsfiddle.net/nnnS3/31/

來源

2013-05-13 15:35:26

在Firefox中這不會改變任何東西...在Chrome中，最好是指定的元素。 – YesMan85 2013-05-13 17:37:05

@ Rogier21嘗試'-moz-box-sizing' – 2013-05-13 17:55:37

輸入元素和最表單控件有border-box爲box-sizing的默認值屬性..你可以通過掃描瀏覽器開發工具中的默認UA樣式來仔細檢查。如果您希望這兩個元素中的行爲保持一致，那麼可以使用在CSS3中引入的box-sizing屬性的其中一個值。該border-box值約束的元素填充和邊境地區的寬/高

.green_submit { 
box-sizing: border-box; /* | padding-box (support is bad) | content-box */ 
}

來源

2013-05-13 15:39:39 Adrift

與其他答案一樣：在Firefox中，這仍然和以前一樣，在Chrome中是正確的。所以我想對盒子大小的支持還沒有真正實現。 – YesMan85 2013-05-13 17:37:43

您需要添加moz前綴，例如'moz-box-sizing：border-box;'爲FF – Adrift 2013-05-13 17:39:09

隨着提交元素相比，div

回答

相關問題