浏览器呈现严格/过渡doctypes之间的差异

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

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

非常感谢摩西和莱利,他们提供的一些信息帮助我找到了答案。

我自己并不真正理解这个怪癖。我认为这与空白有关。在怪癖模式下,空白更容易被原谅。但是,在标准中,空白可能会导致问题。

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

您还应注意,如果您完全关心IE6,则在呈现时,如果您的每个<li>都位于自己的行中,则会在每个列表项之间添加额外的行。

严格的和过渡的教义类型之间只有一些区别,没有一个能真正解释这一点。(注意,我只安装了FF,IE,所以看不到错误本身)。

至于导致这种情况发生的原因,可能是浏览器在不同的渲染模式下有不同的样式表。但是,我认为这实际上是因为浏览器采用了不同的方法来呈现每种模式的页面:严格/转换/怪癖/帧。虽然strict和trans之间唯一有文档记录的区别是如何处理表中的内联图像,但是浏览器不必遵守W3C规范,可以做任何他们真正想要做的事情,而且这往往会导致像您刚刚发现的那样的错误。