代码之家 › 专栏 › 技术社区 › an0

为什么缺少doctype声明会使<pre>具有较低的高度?

html

an0 · 技术社区 · 15 年前

以下代码段(无论是否包含doctype声明)将呈现 <pre> 内容略有不同,即,不带doctype的版本呈现 <预科; 高度较小的内容。

<!-- <!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>

是什么导致了这种差异?

2 回复 | 直到 15 年前

Community Egal 7 年前

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

这背后有一个很长的故事,但简要总结一下:

在浏览器战争时代(1990年代后期),每一个浏览器都以自己的方式呈现HTML。IE的渲染与Netscape不同。“渲染不同”是指你在这里所经历的那种。只是更糟,更糟……在IE中打开的站点在Netscape中是完全不可用的,因为表是倾斜的,或者一些按钮是完全不可访问的,因为它是屏幕外的或者其他什么东西。

这导致页面上出现“在Internet Explorer 3.0中最佳查看”或“在Netscape 4.0中最佳查看”之类的内容。竞争激烈。还有这样的图标: alt text http://toastytech.com/evil/washie.gif

一直以来,W3C的这些人都在以改进的“标准”出版。W3C一直说,“如果每个制造商都坚持标准……那我们就不会有任何问题了。W3C标准被认为是呈现HTML的正确方法,因此它在所有浏览器中都应该是相同的。有 the acid test 检查CSS规则是否在浏览器中正确实现。如果您的浏览器执行错误,它将看起来像 bloodspattered war scene (向下滚动以获得最佳截图)

但是微软和Netscape一直致力于互相破坏,所以W3C的遵守标准的呼吁被忽略了。

QuirksMode是浏览器的“旧”呈现样式。“标准模式”是指当浏览器说“好的,我们将以W3C方式(正确的方式)”。在HTML页面顶部包含doctype是向浏览器发送的一条消息,它表示“此页面处于标准模式,因此请以标准模式呈现,而不是以您以前的古怪方式呈现。”

因此,您的第二个示例(使用普通的<html>标记)以QuirksMode呈现,因为它缺少doctype。

<pre>标记上的页边距顶部在特殊模式下不同。它更小,至少在火狐中。其他浏览器可能不同。

尝试将您的<pre>替换为

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