浏览器渲染严格/过渡 DOCTYPE 之间的区别答案

【问题标题】：Browser Rendering Difference Between strict/transitional DOCTYPEs浏览器渲染严格/过渡 DOCTYPE 之间的区别
【发布时间】：2010-09-17 14:01:57
【问题描述】：

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

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

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

transitional example, strict example

【问题讨论】：

标签： css xhtml browser

【解决方案1】：

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

最后一个难题是所有现代浏览器都在“严格”模式下呈现具有严格 DOCTYPE 的页面，而在“几乎严格”模式下呈现具有过渡 DOCTYPE 的页面。更多详情请见here。

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

【讨论】：

【解决方案2】：

我自己并不真正理解这个怪癖。我确实认为这与空白有关。在 quirks 模式下，空白更宽容。但是，在标准中，空白可能会导致问题。

例如，在您的示例中，您有一个漂亮的、易于阅读的美化源代码。删除容器和元素之间的空格和换行符将允许您消除某些浏览器中的空白（我相信 FF）。要在 IE 中修复它，您需要添加 line-height:0;到图像的包含元素（在本例中为包含锚点或链接标记）。

您还应该注意，如果您完全关心 IE6，则将每个

放在自己的行上会在呈现时在每个列表项之间添加额外的行。

【讨论】：

关于空白的有趣点。我从两个文件中的标签之间删除了所有空格，这使 FF 和 IE 与其他浏览器保持一致。

【解决方案3】：

Strict DOCTYPES 和 Transitional DOCTYPES 之间只有一些区别，没有一个能真正解释这一点。（注意，我只安装了 FF、IE，所以我看不到错误本身）。

就导致这种情况发生的原因而言，这可能是浏览器针对不同呈现模式具有不同样式表的情况。然而，我认为这实际上只是因为浏览器对每种模式 Strict/Trans/Quirks/Frames 的页面呈现方式采用了不同的方法。虽然 Strict 和 Trans 之间唯一记录在案的区别是如何处理表格内的内联图像，但浏览器不必遵守 W3C 规范并且可以做他们真正想做的任何事情，这往往会导致像你刚刚发现的那样的错误。

【讨论】：