HTML「按鈕」應該和其他所有的盒子一樣嗎？

參考button元素和input元素與type的button，我遇到了一個行爲，我認爲這是一個錯誤（在Firefox和Chrome的最新版本中）。但是考慮到表單元素通常是我認爲是W3規則的例外，我認爲在假設我是對的之前我會要求驗證。HTML「按鈕」應該和其他所有的盒子一樣嗎？

行爲是這樣的：在標準模式中，當我向這樣的元素添加邊框時，邊框出現在元素的寬度內。如果我手動將box-sizing設置爲content-box（使用供應商前綴），則行爲符合我的預期，但當box-sizing保留爲其默認時，它不是content-box。 Here's a jsfiddle example。如果你不想去的jsfiddle，這裏的源代碼：

<!doctype html> 
<html> 
<head> 
<title>Broken box model?</title> 
<style> 
body { 
    padding: 30px; 
    background: brown; 
} 
div { 
    position: relative; 
} 
input { 
    background-color: #CCC; 
    font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */ 
    font-size: 18px; 
    font-weight: bold; 
    color: white; 
    text-transform: uppercase; 
    border: 0; 
    width: 150px; 
    height: 90px; 
    margin: 4px; 
} 
input:hover { 
    margin: 0; 
    border: 4px solid white; 
} 
input:active { 
    margin: 0; 
    border: 4px solid white; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 
</style> 
</head> 
<body> 
    <div> 
    <input type="button" value="I am a button" /> 
    </div> 
</body> 
</html>

這是正確的行爲，或者有我無意中發現一個錯誤？

來源

2011-11-30 kojiro

**更簡單的演示：** http://jsfiddle.net/w2eBW/3/ –

**比較演示：* * http://jsfiddle.net/w2eBW/5/ –

謝謝，@ŠimeVidas，這當然更容易理解。 – kojiro

顯然這個bug已經報告給Chrome和Firefox。這個漏洞在於，在這兩種情況下，這些元素的的初始值的值在瀏覽器樣式表中設置爲box-sizing: padding-box。所以這在技術上不是默認值（初始！=默認值）。但是，將這些元素還原爲box-sizing: content-box的唯一方法是使用content-box的專有瀏覽器擴展，因此沒有任何真正的CSS兼容方式來執行此操作。盒子大小不存在於CSS 2.1中，並且專有瀏覽器擴展無效CSS 3.

來源

2011-12-27 20:53:12 kojiro

HTML「按鈕」應該和其他所有的盒子一樣嗎？

回答

相關問題