浏览器兼容性问题综述——正确的认识浏览器兼容性问题

 W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。

    然而，这对开发者来说，是好事，也是坏事。

    说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如 -moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。

    从浏览器内核的角度 来看，浏览器兼容性问题可分为以下三类：
        1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。
        2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
        3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

    例如下面的页面，是一个渲染相关的问题：
[img=https://lh5.googleusercontent.com/NZcN5O4UKSSaV-zCxqv9AKIiZtoJReE1F6_r60UuKMG1Yd5Labogmbt_93DCh0NRAn7H-A7M6IhTwzgn0uEeuwjAiqunN6pEjevWKXhhs6z3Oryu][/img]
    在各个浏览器中都表现的不同，这就属于兼容性问题。

    造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

    现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：
[img=https://lh3.googleusercontent.com/3c8gVfVOJYaUCyLIXV32bSbMyTLnUWznJSzx6NCsaaDPXFP8XGvFcubkS1xK0NQ9oziSfUIHwbltRzK3F-s0FhANSgcqQIs00mAusat37F59Q-ez][/img]

    而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

    例如：
    不规则的嵌套：

< div >
   < li >新闻标题一 li >
   < li >新闻标题一 li >
   < li >新闻标题一 li >
div >

DIV 中直接嵌套 LI 元素是不合标准的，LI 应该处于 UL 内。此类问题常见的还有 P 中嵌套 DIV， TABLE等元素。

    不规范的DOM接口和属性设置：

document.all.a_name.style.top=35;

上面代码中top的值，其实应该是一个字符串值，需有单位。例如：35px。

    总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。

    比如，如果要做一个功能，功能是想让鼠标悬停在 IMG 元素上方时，可以出现提示信息，经常针对 IE 做开发的人，可能会使用 IMG 元素的 “alt” 属性，但其他浏览器中就是不给 ‘alt’ 属性面子。因为 W3C 标准中规定要去做这件事的属性是 ”title“，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 ”title“ 才是正解，不遵循标准去写代码，是开发者的问题。所以，一个问题分两半，浏览器和开发者都有责任。

    既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的bug和不合标准的地方，当某一天 IE 的 ”alt“ 不能用于提示了，还有人用这个错误的属性去显示提示么？ 从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。

    废话少说，下面就讲讲如何有效的避免一些兼容性问题。

    概括来说，避免兼容性问题的有效途径就是：正确的使用 DTD，书写符合 W3C 规范的代码。

    那什么叫做 DTD 呢，DTD是做什么的和为什么要写DTD呢？DTD 是  Document Type Definition 的缩写，是文档类型定义。定义上说“此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范”。

    那其中所说的规范又是什么呢？我们平时所说的规范大部分情况下就指的是 W3C 制定的规范，做WEB前端开发的时候主要接触其中的HTML、CSS、DOM、XML部分。顺便说一下，W3C的网站现在已经提供可校验HTML和CSS 代码的工具了，不知道的同学可以看一下：http://validator.w3.org/ 这个是校验HTML和XHTML的，http://jigsaw.w3.org/css-validator/ 这是校验CSS样式表的。

    DTD 和 W3C校验 及 浏览器解析 之间有啥关系？简单地说：W3C校验将检查DTD与文档内容是否匹配；浏览器将根据DTD决定启用何种渲染模式。

    后面半句就是说，写了正确的DTD，浏览器就会按照标准方式（Standards mode）渲染和解析你的页面，那如果不写或者写错呢，那浏览器就会使用怪癖模式（Quirks mode）来渲染和解析你的页面。怪癖模式的产生的主要原因大概是为了向后兼容，就是为了使那些很早之前（IE 6之前的时代）的网页看上去跟原来的样子差不多。

下面有一个直观的例子。

其中，牌子是DTD，水果什么的是文档真实内容，对号和差是W3C代码检测，动植物是浏览器模式。

这是我们写的代码：
[img=https://lh6.googleusercontent.com/rQJpoZRtB3Gii8vyWafB7IyxiMjpu3xSpaGQutTxe_t49yDhgsfzfU7tuIqw4q4oZNNSinsQIZMt-nTWkuMoHWe19RcX06I_Dtw0xDa6tsd8unom][/img]
W3C校验将检查DTD与文档内容是否匹配，发现有的对不上号，会给出提示：
[img=https://lh5.googleusercontent.com/oaClgM9_SZnQfdMAQfDw1OtYsiUsZ1PkF5em9vhGwxlOeuzU0P6n6KKOFZJa-J-hjCbxtXnhGpSZHJNA21SQqgoYUROyz_FhIROjeYm7lYH2XisV][/img]
浏览器运行的时候，浏览器将根据DTD决定启用何种渲染模式，不会管你写的正确与否，按照你写的方式渲染：
[img=https://lh5.googleusercontent.com/j2emEHoC2yhYhcSr42uFGzxWROWT6MSbVTMVcPzRllnNvMRkuVWAnpCeBD8pz-_2vitoUyfDgs_BRgvhTNZHRkLrc4nSSlO-cR4kBXbCeegtebzO][/img]

    如何判断一个DTD是写得对不对？或者想知道现在的DTD在各个浏览器下到底会触发哪种渲染模式？来这里http://hsivonen.iki.fi/doctype/ 核对一下就行。网页的靠下部分有个红红绿绿的表，自己对照一下好了。

    另外补充两点个人经验：
    1. 正确的使用DTD，并书写符合W3C规范的代码，虽然现在你即使做到这两点也不能保证所有浏览器都会表现一直，但可以最大程度上避免很多兼容性问题。 
    2. 推荐使用 HTML5 的 DTD，好写好记：，可以触发各浏览器的 Standards Mode。

    但是，问题又来了，这样做一定就能解决问题了吗？ 不一定，但是这样可以避免很多问题。比如，IE的盒模型bug等，都可以通过此手段避免。另外有一些是浏览器的bug，无法解决的。比如，在Firefox中，TABLE 里的绝对定位元素的定位问题，再比如IE早期版本对 ‘!important’ 的支持缺陷等。

    这时候，就要采取一些非凡的手段了。

    一种是在JS里用浏览器判断，针对不同的浏览器做不同的处理；另一种，CSS hack。

    在使用CSS hack 的时候注意，CSS hack一定要是丑陋的，时刻提醒自己，那是不得已而为之的解决方式。
 
    总而言之，正确的使用DTD、并书写符合W3C规范的代码 + 使用其他手段……，这些都不能完全避免浏览器的不兼容问题。

    浏览器兼容性问题的“解决”需要浏览器开发商、W3C、开发者共同的努力才能实现。

    而作为开发者，我们要做的，就是尽量了解标准，熟悉各浏览器的Bug和特性，灵活设计页面功能，才可以避免出现浏览器兼容性问题。

转载于:https://www.cnblogs.com/you-zi/articles/4695340.html