3

试试下面的简单例子：

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

4

2 回答 2

3

正如 phihag 所说，它是块与内联。

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

这意味着浏览器可以自由呈现它认为合适的内容。

坚持<!DOCTYPE html>在顶部使用漂亮而紧凑的 HTML5 DOCTYPE，这将防止浏览器进入 Quirks 模式。

于 2009-02-24T23:18:38.507 回答
2

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

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

于 2009-02-24T23:14:07.817 回答