浏览器兼容性问题与浏览器的内核及渲染模式

兼容性问题

目前市面上流行的浏览器有多种，这些浏览器在处理一个相同的页面时，表现或行为有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。

浏览器的内核

各品牌浏览器的内核是不同的，不同的内核处理同一段代码的时候思路不同。因此可以说，浏览器间内核的差异是产生兼容性问题的根本原因。

“内核”也称为“引擎”。常见的浏览器及其渲染引擎（又称排版引擎）、脚本引擎的列表如下：

Browser Name	Layout Engine	ECMAScript Engine
Internet Explorer 6 - 8	Trident	JScript
Firefox 3.5	Gecko	TraceMonkey
Chrome 4	WebKit	V8
Safari 4	WebKit	SquirrelFish Extreme
Opera 10	Presto	Carakan

注：关于浏览器内核的更多信息，请参考维基百科 - 排版引擎及维基百科 - 网页浏览器比较中的相关内容。

浏览器的工作模式

工作模式简介

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异，但本文仅讨论浏览器在处理 HTML 页面时工作模式。

注：关于浏览器的工作模式的更多信息，请参考 Activating Browser Modes with Doctype。

工作模式的来源及变迁

微软于 2001 年 8 月 27 日发布的 IE6（Internet Explorer 6）增强了对 CSS1 的兼容，这使得 IE6 对 CSS 的解析及渲染与它的前一个版本 IE5.5 有了很大的差别，如对盒模型的理解、表格尺寸的算法等。

为了保持良好的向后兼容性，微软为用户提供了一个“开关”，来决定浏览器的工作模式，这个“开关”就是页面顶部的 DTD。
某些 DTD 将使 IE6 工作在“标准兼容模式”（即“标准模式”），这种模式使用了 IE6 最新的处理方式，包括对 CSS1 的兼容及一些 DHTML 方面的增强。
而另一些 DTD，包括不设置 DTD 将使 IE6 工作在“向后兼容模式”（即“混杂模式”），这种模式对页面的处理是与 IE5.5 保持一致的，这样就可以保证对一些在 IE5.5 中表现良好的页面在 IE6 中也能达到同样的效果。
微软在后续推出的 IE7、IE8 中，也使用了上述“开关”，与 IE6 一样，在 IE7、IE8 的“混杂模式”下，对页面处理方式仍与 IE5.5 一致。因此可以说，IE 系列的“混杂模式”，将浏览器的行为冻结在了 IE5.5 这个版本，虽然 IE 各版本的混杂模式也略有区别，但它们的本意都是向后兼容。

随着时间的推进和标准的进步，IE6、IE7 的“标准模式”逐渐已经变得不够标准了，2009年3月19日发布的 IE8 重新定义了“标准模式”，再次增强了对标准规范的支持，同时为了保持对 IE7 的兼容，IE8 增加了一种工作模式：“接近标准模式”。于是，IE8 的工作模式就分成了三种：“标准模式”、“接近标准模式”和“混杂模式”。

目前所有主流浏览器对于向后兼容问题的处理都与 IE 系列一样，提供了不同的模式来保证向后兼容。

浏览器的工作模式就是在这种背景下诞生的，它很好的解决了浏览器对标准支持上的不断增强及对一些错误的修复而导致的向后兼容问题，但也将浏览器在不同情况下的表现及行为变得更加复杂多样。

通过以上的内容，我们可以得出结论：如果一个页面能使各浏览器都工作在“标准模式”下，那么各浏览器都将尽量兼容标准，因此各浏览器之间表现出的差异是很少的。相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器都将尽量向后兼容，因此各浏览器之间表现出的差异将会最大化。

注：

关于 IE6 的更多信息，请参考维基百科 - Internet Explorer 6。
关于此问题，请参考 W3H - RD8001: 各浏览器中 'width' 和 'height' 在某些元素上的作用位置有差异。
关于此问题，请参考 W3H - RE8017: IE Firefox Opera 的混杂模式对于 TD 元素的百分比高度计算错误。
关于 IE6 对浏览器工作模式的区分的详细信息，请参考 MSDN - CSS Enhancements in Internet Explorer 6。
比如 IE6 的混杂模式有著名的“双边距 Bug”，而 IE7 和 IE8 的混杂模式则没有这个问题。
关于此问题，请参考 W3H - RX2001: IE5.0 IE5.5 IE6 中浮动元素在某些情况下会有双倍外边距。
document.compatMode 最先出现在 IE6 中，它的值标示了浏览器的工作模式，“标准模式”返回“CSS1Compat”，“混杂模式”返回“BackCompat”。这一做法到目前为止仍被所有主流浏览器所采用。
需要注意的是：在后来出现的“接近标准模式”中，document.compatMode 的返回值与“标准模式”一致，为“CSS1Compat”。也就是说，不能通过 document.compatMode 来详细区分浏览器的工作模式，只能用来判断浏览器是否工作在“混杂模式”下。
因为“标准模式”与“接近标准模式”之间的差异并不大，所以这个方法至今仍被广泛使用。
关于 Firefox 中 DTD 与浏览器工作模式的详细信息，请参考 Mozilla's DOCTYPE sniffing，关于 Opera 中 DTD 与浏览器工作模式的详细信息，请参考 DOCTYPE Switches support in Opera Presto 2.6。

建议

在编写一个页面时，要使用可以触发各浏览器“标准模式”的DTD，并书写符合规范的代码，以保证您的页面在各浏览器中可以最大程度的兼容。

原文来自：http://www.w3help.org/zh-cn/

更多专业前端知识，请上【猿2048】www.mk2048.com