Question

尝试以下简单示例：

<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对所有内容一样。它不应该将输入元素与其他所有元素相同，并将填充和边框添加到宽度？

Answer 1

正如phihag所说，它是阻止内联。

但是，您的示例有一个缺陷：您没有使用DOCTYPE。

这意味着浏览器可以随意渲染。

将<!DOCTYPE html>粘贴在顶部以使用精美且紧凑的HTML5 DOCTYPE，这将阻止浏览器进入Quirks模式。

Answer 2

宽度问题是脑死亡的IE兼容怪癖模式的结果。请参阅Peter Boughton的答案（doctype）以获得补救措施。

此外，div是块级元素，但input不是。在您的规则中添加display:block;以在两种情况下实现div呈现，或display:inline;将这两个元素格式化为内联。但是，Firefox会原谅顶级内联元素并适当地渲染它们。

为什么Firefox使用IE框模型作为输入元素？

2 个答案: