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

2023年12月3日发(作者：)

前端常见的浏览器兼容性问题及解决方案一、常见的浏览器内核：常见的浏览器内核可以分四种：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.

cursor:hand VS cursor: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加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：相应的css为#imfloat{

float:left;

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

display:inline;/*IE下再理解为5px*/}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.

页面的最小宽度如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：#container{ min-width: 600px;width:expression(Width＜ 600? "600px": "auto" );}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。13.

DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;}

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

#right{ width:50%;}

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