CSS的一些浏览器兼容性

1. cursor:hand   VS   cursor:pointer

firefox不支持hand，但ie支持pointer
解决方法:   统一使用pointer

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

需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){        document.getElementById('element').innerText   =   "my   text";}   else{        document.getElementById('element').textContent   =   "my   text";}

3.CSS透明

IE：filter:progid:DXImageTransform.Microsoft.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;border 1px;} 
ie理解为box.width = 100 
ff理解为box.width = 100 + 1*2 = 102  //加上边框2px

解决方法：

div{margin:30px!important;margin:28px;}

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.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;}

9. DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}<div id="box"><div id="left">＜/div><div id="right">＜/div></div>

10. 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }<div id="box">    <p>p对象中的内容＜/p></div>

解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

11.IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.

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

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

Code:<style type="text/css"><!--a:link {}a:visited {}a:hover {}a:active {}--></style>