前端浏览器兼容性问题总结

2023年6月21日发(作者：)

前端浏览器兼容性问题总结市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js引擎，内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是⾃⼰的Presto内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核；360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核QQ浏览器：Trident（兼容模式）+Webkit（⾼速模式）常见的兼容性问题：1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同解决⽅案：css⾥增加通配符*{margin：0；padding：0}6双边距问题；在IE6中设置了float，同时⼜设置margin，就会出现边距问题解决⽅案：设置display：inline；3.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow：hidden，或者设置line-height的值⼩于你的设置⾼度4.图⽚默认有间距解决⽅案：使⽤float为img布局9以下浏览器不能使⽤opacity解决⽅案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：(style=0,opacity=50);6.边距重叠问题；当相邻两个元素都设置了margin边距时，margin将取最⼤值，舍弃最⼩值；：hand显⽰⼿型在safari上不⽀持解决⽅案：统⼀使⽤cursor：pointer8.两个块级元素，⽗元素设置了overflow：auto；⼦元素设置了position：relative；且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position：问题说明：Firefox下，可以使⽤const关键字来定义常量；IE下，只能使⽤var关键字来定义常量。解决⽅法：统⼀使⽤var关键字来定义常量。ment问题问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。解决⽅法：使⽤srcObj = ment?ment:;11.事件绑定IE:Event();其他浏览器：ntListener();标准浏览器采⽤事件捕获的⽅式对应IE的事件冒泡机制（即标准由最外元素⾄最内元素或者IE由最内元素到最外元素）最后标准⽅亦觉得IE这⽅⾯的⽐较合理，所以便将事件冒泡纳⼊了标准，这也是addEventListener第三个参数的由来，⽽且事件冒泡作为了默认值。12.操作tr的html在ie9以下，不能操作tr的略有不同IE：ActiveXObject其他：xmlHttpReuest14.对象宽⾼赋值问题问题说明：FireFox中类似 = 的语句⽆效。CSS1. cursor:hand VS 1. cursor:hand VS cursor:pointercursor:pointerfirefox不⽀持hand，但ie⽀持pointer解决⽅法: 统⼀使⽤pointer2. innerText在IE中能正常⼯作，但在FireFox中却不⾏.需⽤textContent。解决⽅法:if(f("Explorer") > -1){mentById('element').innerText = "my text";} else{mentById('element').textContent = "my text";}3. CSS透明IE：filter:progid:(style=0,opacity=60)。FF：opacity:0.6。4. css中的width和padding在IE7和FF中width宽度不包括padding，在Ie6中包括padding.5. FF和IEBOX模型解释不⼀致导致相差{width:100;border1px;}ie理解为 =100ff理解为 =100 + 1*2 = 102 //加上边框2px解决⽅法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序⼀定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;6. IE5 和IE6的BOX解释不⼀致IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}7. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空⽩以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空⽩，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，⽽在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。8. 元素⽔平居中问题FF: margin:0auto;IE: ⽗级{ text-align:center; }9. Div的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼：line-height:200px;然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏。10. margin加倍的问题10. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;例如：相应的css为# imfloat{float:left;margin:5px;//IE下理解为10pxdisplay:inline;//IE下再理解为5px}11. IE与宽度和⾼度的问题11. IE与宽度和⾼度的问题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;}12. 页⾯的最⼩宽度12. 页⾯的最⼩宽度如上⼀个问题，IE不识别min，要实现最⼩宽度，可⽤下⾯的⽅法：#container{ min-width: 600px;width:expression(Width＜ 600? "600px": "auto" );}第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。13. DIV浮动IE⽂本产⽣3象素的bug13. DIV浮动IE⽂本产⽣3象素的bug左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}