为什么Firefox对输入元素使用IE框模型？ [英] Why does Firefox use the IE box model for input elements?
问题描述
尝试以下简单示例：
<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对于一切一样。不应该把输入元素视为一样的东西，并添加填充和边框到宽度？
Notice the div and the input gets different widths. In fact, the width of the input is 92px. For the input, Firefox calculates the width outside the border and padding, the same way IE does for everything. Shouldn't it treat input elements the same as everything else, and add the padding and border to the width?
推荐答案
As phihag
As phihag says, it's block vs inline.
但是，您的示例存在一个缺陷：您没有使用DOCTYPE。
However, a flaw with your example: you're not using a DOCTYPE.
这意味着浏览器可以根据需要自由呈现。
That means the browser is free to render as it sees fit.
粘贴<！DOCTYPE html> 在顶部使用漂亮和紧凑的HTML5 DOCTYPE，这将防止浏览器进入怪异模式。
Stick <!DOCTYPE html> at the top to use the nice and compact HTML5 DOCTYPE, which will prevent browsers from going into Quirks Mode.
这篇关于为什么Firefox对输入元素使用IE框模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
