css - 严格/过渡 DOCTYPE 之间的浏览器呈现差异

Question

前段时间我遇到了一个“问题”，但我一直没有弄清楚。希望有人能照亮它。当我将 DOCTYPE 从严格更改为过渡时，是什么导致某些浏览器(Chrome、Opera 和 Safari)以不同方式呈现页面。我知道造成这种情况的一般原因是触发了怪癖模式，但是这两个文件的 XHTML 和 CSS 都根据 w3c 验证器进行了验证。

我只能假设这些浏览器对这两个 DOCTYPE 使用不同的内部样式表，但不知道它们为什么会这样做。我只是希望有人能证实为什么会这样。

可以看出的区别是“标题图像”底部和菜单栏边框之间的空间。在上述浏览器中，使用过渡 DOCTYPE 时两者之间没有差距，但在使用严格时存在差距(在 IE 和 FF 中两者都存在差距)。我最终发现，将 display:block 添加到 img 标签可以阻止所有情况下出现的间隙(这是我的目标)。

transitional example , strict example

Answer 1

在“严格”模式下，图像似乎默认显示为内联元素。内联元素在底部有一个空格来表示下行字符，例如 g 或 q。由于图像不会有任何下降字符，这被认为是导致引入“几乎严格”模式的奇怪行为。在“几乎严格”模式下，所有 img 标签都呈现为 display: block 而不是内联。可以找到更多详细信息 here .

最后一个难题是，所有现代浏览器都在“严格”模式下呈现具有严格 DOCTYPE 的页面，而在“几乎严格”模式下呈现具有过渡 DOCTYPE 的页面。可以找到更多详细信息here .

非常感谢 Moses 和 Riley，他们提供的一些信息帮助我找到了答案。