- Firefox:-moz-box-shadow
- Safari:-webkit-box-shadow
- Opera:-o-box-shadow
- IE:-ms-box-shadow
浏览器兼容性汇总
1.IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
2.display:inline-block;IE6，7下不兼容
用float:left
3.position:fixed;IE6不支持
IE6下用position和JS模拟，或者完全不用，用position和JS模拟
4.cursor：hand;IE下正常FF不识别
用cursor:pointer解决
5.透明度
IE下使用filter:alpha(opacity=50)滤镜，其他浏览器用opacity:0.5;
至于JS的兼容性巨多，像比较常用的：
FF：addEventLister,
６．浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
７．a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。
８．input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。
ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。
9.IE浏览器下td 和 td 之间有空格数据较多的情况下可能有显示异常的情况
10.IE8及IE8以下不支持 <script type="application/javascript"> 写传统的<script type="text/javascript">
11.CSS里的浏览器前缀