Question

以下代码段（包含或不包含DOCTYPE声明）会使<pre>内容略有不同，即，无DOCTYPE版本会使<pre>内容呈现较少的高度。

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -->
<!-- "http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
  <head>
  </head>
  <body>
    <pre>1</pre>
  </body>
</html>

造成这种差异的原因是什么？

Answer 1

你，我的朋友，正在看quirksmode正在行动。

这背后有很长的故事，但总结一下：

_{（来源：wikimedia.org）}

在浏览器大战时代（1990年代后期），每个浏览器都以“自己的方式”呈现html。 IE的渲染与Netscape不同。通过“以不同方式呈现”，我的意思是你在这里经历的那种...只是更多，更多，更糟糕..你在IE中打开的网站很好，在Netscape中完全无法使用，因为桌子会偏斜，或者一些按钮完全无法访问，因为它是屏幕外的东西。

这导致页面显示“在Internet Explorer 3.0中最佳浏览”或“在Netscape 4.0中最佳浏览”等内容。很多竞争。还有这样的图标：
_{（来源：toastytech.com）}

W3C的这些人一直在发布改进的“标准”。 W3C一直说“如果每个制造商都坚持标准......那么我们就不会有任何问题”。 W3C标准应该是呈现HTML的正确方式，所以它在所有浏览器中应该看起来一样。有the acid test检查css规则在浏览器中正确实现。如果您的浏览器实现错误，它将看起来像bloodspattered war scene（向下滚动以获取精彩的屏幕截图）..

但微软和Netscape一心想要互相摧毁，所以W3C要求遵守标准的呼吁被忽略了。

Quirksmode是浏览器的“旧”渲染样式。 “标准模式”是当浏览器说“好的时候，我们将以W3C的方式（”正确的“方式）”。在您的html页面顶部包含一个DOCTYPE是向浏览器发出的一条消息：“此页面处于标准模式，因此请以标准模式呈现，而不是旧的古怪方式。”

因此，您的第二个示例（使用简单的＆lt; html＆gt;标记）在quirksmode中呈现，因为它缺少DOCTYPE。

＆lt; pre＆gt;上的margin-top。标签在怪癖模式下是不同的。它至少在Firefox中较小。其他浏览器可能会有所不同。

尝试替换你的＆lt; pre＆gt;与

＆lt; pre style =“margin：5px;”＆gt; 1＆lt; / pre＆gt;

如果你这样做，两个页面看起来都一样。

Answer 2

那些应该是两个单独的文件吗？后者有doctype吗？如果不是，它将以怪癖模式呈现。

为什么缺少DOCTYPE声明呈现<pre> with less height?</pre>

2 个答案: