Css在IE和火狐的兼容性总结

 

1、cursor:hand VS cursor:pointer

　　firefox不支持hand，但ie支持pointer

　　解决方法: 统一使用pointer

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

　　解决方法:

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

　　document.getElementById('element').innerText = "my text";

　　} else{

　　document.getElementById('element').textContent = "my text";

　　}

　　3、FireFox中类似 obj.style.height = imgObj.height 的语句无效

　　解决方法：

　　obj.style.height = imgObj.height + 'px';

　　4、ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。

　　解决方法：

　　//向table追加一个空行：

　　var row = otable.insertRow(-1);

　　var cell = document.createElement("td");

　　cell.innerHTML = "";

　　cell.className = "XXXX";

　　row.appendChild(cell);

　　5、 padding 问题

　　padding 5px 4px 3px 1px FireFox无法解释简写,

　　必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

　　6、 消除ul、ol等列表的缩进时

　　样式应写成:list-style:none;margin:0px;padding:0px;

　　其中margin属性对IE有效，padding属性对FireFox有效

　　7、 CSS透明

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

　　FF：opacity:0.6。

　　8、CSS圆角

　　IE：不支持圆角。

　　FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

　　9、 CSS双线凹凸边框

　　IE：border:2px outset;。

　　FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;