如何机智地回答浏览器兼容性问题

一，从根源上讲

        各个浏览器之所以存在兼容性的问题，究其原因是不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。内核是浏览器底层架构最核心和基础的部分，按照功能可分为：渲染引擎和JS引擎。渲染引擎（Rendering Engine）也称为布局引擎（Layout Engine）、排版引擎，负责对网页语法的解释和渲染显示到浏览器。一个渲染引擎通常包括HTML解释器、CSS解释器、布局layout、网络等模块:

        通常讲的浏览器内核就是指代的浏览器的渲染引擎。不同的浏览器使用不同的渲染内核，对HTML/JS/CSS的标准语法的解释也存在差异，导致在显示效果、语法支持度和渲染效率上也存在差别，所以也就导致了网页程序在不同内核的浏览器下的表现和渲染差异，乃至bug都不统一。

二，常见的HTML和CSS中的兼容性问题

1.双边距BUG float引起的  使用display

浮动元素的双倍Margin的Bug是IE6以及其以下版本的一个经典Bug了，触发这个Bug的产生是给元素设置了float并且同时和float同一方向设置了margin值，此时在IE6(IE6以下版本我们飘过不理了)就会产一个双倍margin值的Bug。

修复这个Bug的方法很简单，只需要改变浮动元素的显示风格，也就是说在浮动元素中增加一个“display:inline”属性，这样就可以轻松的解决“浮动元素的双倍Margin”的Bug。

2.hover失效

        超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

  L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

3.图片间隙

        div中的图片间隙(该bug出现在IE6及更低版本中)

        描述：在div中插入图片时，图片会将div下方撑大三像素。

        hack1:将

与写在一行上；

        hack2:将转为块状元素，给添加声明：display:block;

4.透明属性

IE浏览器写法：filter:alpha(opacity=value);取值范围1--100

兼容其他浏览器写法：opacity:.value;(value的取值范围0-9)

5：min-height在IE6下不兼容

解决方案：

1）min-height：value；

      _height：value；

2）min-height：value；

     height：auto！important；

     height：value；

6：按钮默认大小不一

解决方案：

1）用a标签来模拟按钮，添加样式；

2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

7:上下margin的重叠问题

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

8:hack

Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

在属性前可加以上这三个符号

_ 只有IE6以下及IE6支持,例如_height:100px;

* 只有IE7以下及IE7支持,例如*height:100px;

*+只有IE7以下及IE7支持,例如*+height:100px;

针对IE8以及以上加属性值后缀\0（数字零）,例如：height:200px\0;

9：Filter

表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

三 常见的JavaScript的兼容性问题

1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

4.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

5.获得DOM节点的父节点、子节点的方式不同

其他浏览器：parentNode  parentNode.childNodes       

IE：parentElement parentElement.children