什么是兼容问题？

　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，

无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须

要解决的问题。

CSS里的兼容性问题　

1.cursor:hand VS cursor:pointer

firefox 不支持hand，但ie支持 pointer
解决方法:统一使用pointer

2. innerText在IE中能正常工作，但在FireFox中却不行

解决方法:

需用textContent

if(navigator.appName.indexOf("Explorer")>-1){
    document.getElementById('element').innerText = "my text";
}else{
    document.getElementById('element').textContent = "my text";
}

3. CSS透明

IE：filter:alpha(opacity=60)。
FF：opacity:0.6。

4.盒子模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分； IE盒子模型的范围也包括

margin、border、padding、content。和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。

因此，问题主要表现在css中的width是否计算border和padding的问题，这个是默认的盒子解析模型不同导致的。

IE6：中包括border和padding(box-sizing: border-box;)

IE7和非IE：width宽度不包括border和padding(box-sizing: content-box;)

解决方式：根据使用方式，写好box-sizing属性。

5.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距

设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

6.图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这

个间距使用float是正道。

7.万能清除浮动

.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

8.IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现

内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

9.溢出显示省略号

select { 
-o-text-overflow:ellipsis; 
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden; 
width:200px;
}

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

10.IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block。

11.超链接访问过后hover样式就不出现的问题

解决技巧

a:link {} 
a:visited {} 
a:hover {} 
a:active {}

js里面的兼容性问题

1.const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量.

解决方法：统一使用var关键字来定义常量.

2.event.srcElement问题

说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj =event.srcElement ?event.srcElement : event.target;

3.事件绑定

IE：dom.attachEvent();

其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这

方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

4.ajax略有不同

IE:ActiveXObject

其他：xmlHttpReuest

前端浏览器兼容问题及解决办法