浏览器呈现严格/过渡DOCTYPE之间的区别
前段时间我遇到了一个“问题”，我从来没有深究过。 希望有人能够照亮它。 当我将DOCTYPE从严格更改为过渡时，会导致某些浏览器（Chrome，Opera和Safari）呈现不同的页面。 我知道这种情况的一般原因是触发了怪异模式，但根据w3c验证程序验证这两个文件的XHTML和CSS都是有效的。
我只能假设这些浏览器为两个DOCTYPE使用不同的内部样式表，但没有真正意识到他们为什么会这样做。 我只是希望有人能证实为什么会发生这种情况。
可以看到的差异是“标题图像”底部和菜单栏边框之间的空白处。 在前面提到的浏览器中，当使用过渡性DOCTYPE时，两者之间没有差距，但是在严格使用时（在IE和FF中，两者都存在差距）。 我最终发现，将display:block添加到img标签可以阻止所有情况下出现的间隙（这是我的目标）。
过渡的例子，严格的例子
在“严格”模式下，默认情况下，图像显示为内联元素。 内联元素在底部给出一个空间来解释诸如g或q等下行字符。 由于图像不会有任何下降字符，这被认为是奇怪的行为，导致了“几乎严格”模式的引入。 在'几乎严格'模式下，所有的img标签都被渲染为display: block而不是inline。 更多细节可以在这里找到。
最后一块难题是，所有现代浏览器都以严格模式渲染严格DOCTYPE的页面，以及以“几乎严格”模式使用过渡DOCTYPE的页面。 更多详细信息可以在这里找到。
非常感谢摩西和赖利，他们提供的一些信息帮助我找到了答案。
我自己并没有真正理解这个怪癖。 我认为这与空白有关。 在怪癖模式下，白色空间更为宽容。 但是，在标准中，空白可能会导致问题。
例如，在你的例子中，你有一个很好的美化来源，易于阅读。 删除容器和元素之间的空白区域和换行符将允许您删除某些浏览器中的空白（FF，我相信）。 要在IE中修复它，你需要添加line-height：0; 到图像的包含元素（在这种情况下，包含锚点或链接标记）。
你还应该注意到，如果你关心的是IE6，那么每个<li>在他们自己的行上都会在渲染时在每个列表项之间添加额外的行。
严格DOCTYPE和过渡DOCTYPES之间只有一些差异，但没有一个真正解释这一点。 （注意，我只有FF，安装了IE，所以我看不到错误本身）。
至于导致这种情况发生的原因，可能是浏览器针对不同渲染模式使用不同样式表的情况。 不过，我认为这真的只是归结为浏览器采用不同的方法来呈现每种模式Strict / Trans / Quirks / Frames的页面。 虽然Strict和Trans之间唯一记录的差异是如何处理表格内的图像，但浏览器不必遵守W3C规范，可以做任何他们真正想要的东西，这往往会导致像你刚才发现的那样的错误。
链接地址: http://www.djcxy.com/p/88761.html上一篇: Browser Rendering Difference Between strict/transitional DOCTYPEs
下一篇: C Class Prefixes