管道局培训课件帮助浏览器兼容性汇.pdfVIP

1/11

CSS兼容性汇总

1.cursor:handVScursor:pointer

firefox不支持hand，但ie支持pointer

解决方法:统一使用pointer

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

需用textContent。

解决方法:

if(navigator.appName.indexOf(Explorer)-1){

document.getElementById(element).innerText=mytext;

}else{

document.getElementById(element).textContent=mytext;

}

3.CSS透明

IE：filter:progid:DXImageTransform..Alpha(style=0,opacity=60)。

FF：opacity:0.6。

4.css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

5.FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border1px;}

ie理解为box.width=100

ff理解为box.width=100+1*2=102//加上边框2px

解决方法：div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，IE不能识别!important这个属性，但别的浏览

2/11

器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6.IE5和IE6的BOX解释不一致

IE5下div{width:300px;margin:010px010px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在

IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时

我们可以做如下修改div{width:300px!important;width/**/:340px;margin:010px010px}

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-a