前端常见浏览器兼容性问题解决方案

animation-name: fadeIn; /* 不带前缀的放到最后 */

}

/* 复杂属性 keyframes */

@-webkit-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-moz-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-o-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-ms-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

/* 不带前缀的放到最后 */

@keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

---

3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

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

解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

<divid=”imfloat”>

相应的css为

imfloat{

float:left;

margin:5px;//IE下理解为10px

display:inline;//IE下再理解为5px}

备注： 我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

---

4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

碰到频率： 60%

解决方案：

1. 给超出高度的标签设置overflow:hidden;

2. 或者设置行高line-height 小于你设置的高度。

备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

---

5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状： IE6里的间距比超过设置的间距

碰到几率： 20%

解决方案： 在display:block;后面加入display:inline;display:table;

备注： 行内属性标签，为了设置宽高，我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

---

6. IE浏览器div最小宽度和高度的问题

问题症状： IE浏览器div最小宽度和高度不生效

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个最小宽度是比较重要的。要解决这个问题，可以这样：

#box{

width: 80px;

height: 35px;

}

html>body #box{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}

---

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

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:

---

8. 图片默认有间距

问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

碰到几率： 20%

解决方案： 使用float属性为img布局(所有图片左浮)

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

---

9. css hack解决浏览器兼容性

不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。

下面是css hack写法：

background-color:yellow0; 0 是留给ie8的

+background-color:pink; + ie7定了；

_background-color:orange; _专门留给神奇的ie6；

---

二、js兼容

1. 事件绑定

IE: dom.attachEvent();

标准浏览器： dom.addEventListener(‘click',function(event){},false);

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。

如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。

以下实例演示了跨浏览器的解决方法：

var x = document.getElementById(“myBtn”);

if (x.addEventListener) { //所有主流浏览器，ie9+

x.addEventListener(“click”, myFunction);

} else if (x.attachEvent) { // IE 8 及更早 IE 版本

x.attachEvent(“onclick”, myFunction);

}

---

2. event事件对象问题

document.οnclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；

var e=ev;

console.log(e);

}

document.οnclick=function(){//谷歌和IE支持，火狐不支持；

var e=event;

console.log(e);

}

document.οnclick=function(ev){//兼容写法；

var e=ev||window.event;

var mouseX=e.clientX;//鼠标X轴的坐标

var mouseY=e.clientY;//鼠标Y轴的坐标

}

---

2. event.srcElement(事件源对象)问题

IE： event对象有srcElement属性，但是没有target属性；

Firefox: event对象有target属性，但是没有srcElement属性。

解决方法：

srcObj = event.srcElement?event.srcElement:event.target;

---

3. 获取元素的非行间样式值：

IE: dom.currentStyle[‘width’] 获取元素高度

标准浏览器： window.getComputedStyle(obj, null)['width'];

跨浏览器兼容解决方法：

// 获取元素属性值的兼容写法

function getStyle(obj,attr){

if(obj.currentStyle){

//兼容IE

obj.currentStyle[attr];

return obj.currentStyle[attr];

}else{

//非IE，

return window.getComputedStyle(obj, null)[attr];

}

}

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。