浏览器渲染严格/过渡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，他们提供的一些信息帮助我找到答案。

Answer 2

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

例如，在您的示例中，您有一个很容易读取的美化源。删除容器和元素之间的空格和换行符将允许您删除某些浏览器中的间隙（我相信FF）。要在IE中修复它，你需要添加line-height：0;到图像的包含元素（在这种情况下是包含锚或链接标记）。

你还应该注意，如果你完全关心IE6，那么你自己的每一个＆lt; li＆gt;都会在渲染时在每个列表项之间添加额外的行。

Answer 3

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

对于导致这种情况发生的原因，可能是浏览器为不同的渲染模式设置了不同的样式表。但是，我认为这实际上只是因为浏览器采用不同的方法来呈现每种模式Strict / Trans / Quirks / Frames的页面。虽然Strict和Trans之间唯一记录的差异是如何处理表内的内嵌图像，但浏览器不必遵守W3C规范并且可以做任何他们真正想要的事情，这往往会导致像您刚刚发现的那样的错误。