再谈 Firefox 与 IE6 的兼容问题
davies 发表于 2005 年 06 月 8 日
前几天在重新设计 Blog 的页面布局时，碰到了几个 Firefox 和 IE 的兼容问题，即同一个网页在两者中显示效果，见文章 《Firefox 和 IE 的兼容问题》。当时没有仔细寻找原因，用一种迂回的方法大概解决了。后来在水木社区的 Firefox 版与大家讨论，经 atppp 和 old9 等的指点，再到网上 Google 一番，对这个问题有了进一步的认识，现做一下总结。
Firefox 对网页的处理有三种模式：Standard、Almost Standard 和 Quirks，它是根据 DOCTYPE 来确定所用的模式，具体请看Mozilla的开发文档：Mozilla's quirks mode。
IE 在兼容 W3C 标准的同时又有自己的一套模型——Quirks，而且不同版本对 W3C 标准的支持程度还不一样。为了使设计的网页能够兼容大多数浏览器，应该尽量遵照 W3C 规范进行设计，并且让 IE 也遵照 W3C 规范进行渲染。
网页的 DOCTYPE 申明对指导浏览器进行页面渲染非常重要，之前我对这一点没有引起重视，看到在没有 doctype 申明的情况下网页照样能显示，以为可以不用，没想到它的内容会影响到页面的显示效果，尤其是 IE。《The IE box model and Doctype modes》最这个问题做了详细的说明。对 XHTML 1.0 Transitional 格式的文档，只有在申明了 DOCTYPE 且没有 XML 的 prolog 的情况下其显示才符合标准，如下：
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
XHTML 是 W3C 目前推荐的网页标准，BlogXP 也按照这个标准去做，让 XSLT 生成 XHTML 页面，设置其 xsl:output 如下：
<xsl:output method="xml" media-type="text/html" encoding="utf-8"
omit-xml-declaration="yes" indent="yes"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />
其中有几个问题需要注意：
- method, doctype-system 和 doctype-public 为生成 XHTML 页面所必需的。
- mod-xslt会根据所用 XSLT 的输出类型设定 HTTP 头的 CONTENT_TYPE，比如 method="xml" 时，其 CONTENT_TYPE = "text/xml"，这在 Firefox 中能正常显示 XHTML 页面，而 IE6 却不行，它会按照显示 XML 文档的方式显示，为树状结构。这时需要用 media-type 来指定文档类型为 text/html 。
- 默认情况下，输出的 XHTML 文档前面会有 XML 的头部申明 <?xml version="1.0" encoding="UTF-8" ?>，它的存在会导致 IE6 不采用 W3C 标准兼容的方式显示页面，需要加参数 omit-xml-declaration="yes" 以去掉 XML 的头部申明。
有了这些准备，就可以按照 W3C 标准的 box model 来设计网页布局了，在 Firefox 和 IE6 中能得到相同的结果，其它兼容W3C 标准的浏览器应该也没什么问题。至于那些不兼容 W3C 标准的浏览器，比如 IE5，暂不考虑，哈哈:-) 这个标准的box model 着实有些别扭，不如 IE 中那个模型来得自然，或许正是这个原因，IE 的开发团队才想用一套自己的模型。
把 blog 的页面修改一下，总算能“所想即所得”了:-) 修改的过程中还碰到一个诡异的问题，下回讨论。
参考文献：
Mark Pilgrim，Dive Into Accessibility