爲什麼Firefox使用IE框模型輸入元素？

嘗試下面的簡單的例子：爲什麼Firefox使用IE框模型輸入元素？

<html> 
<head> 
<style> 
    div, 
    input { 
    border: 1px solid #000; 
    margin: 2px; 
    padding: 3px; 
    width: 100px; 
    } 
</style> 
</head> 
<body> 
    <div>div</div> 
    <input value="input" /> 
</body> 
</html>

通知div和輸入得到不同的寬度。實際上，輸入的寬度是92px。對於輸入，Firefox計算邊界和填充以外的寬度，與IE對所有內容的處理方式相同。不應該將輸入元素與其他所有元素相同，並將填充和邊框添加到寬度中？

來源

2009-02-24 Marius

正如phihag所說，它是內嵌式的。

但是，您的示例存在缺陷：您沒有使用DOCTYPE。

這意味着瀏覽器可以自由渲染，因爲它認爲合適。

堅持<!DOCTYPE html>頂部使用漂亮和緊湊的HTML5 DOCTYPE，這將防止瀏覽器進入怪癖模式。

來源

2009-02-24 23:18:38

寬度問題是大腦死亡IE兼容怪癖模式的結果。請參閱Peter Boughton的解答（doctype）。

此外，div是塊級元素，但input不是。將display:block;添加到您的規則中，以在兩種情況下實現div渲染，或display:inline;將這兩個元素都格式化爲內嵌格式。但是，Firefox會原諒頂級內聯元素並適當地渲染它們。

來源

2009-02-24 23:14:07 phihag

顯示塊不會改變任何東西。添加文檔類型。 – Marius 2009-02-26 14:09:46

爲什麼Firefox使用IE框模型輸入元素？

回答

相關問題