浏览器解析存在差异

兼容性 是很令人头疼的一个问题，但在开发中又会经常面临到的，特别是各大浏览器对CSS的解析又存在不小的差异，因此如何处理就成了一个关键性的问题。

CSS3 / 加前缀

CSS3属性(选择器基本也不支持)在 IE7 以下基本全军覆没，然而在火狐，谷歌等主流浏览器上则可以通过加前缀解决。

1. -webkit- // Google Chrome,傲游3,猎豹浏览器,百度浏览器

2. -moz- //firefox 火狐浏览器

3. -ms- // IE浏览器

4. -o- // opera 欧朋浏览器

示例：

.div1 { 
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px; 
}
 

效果：

CSS / !important

我们都知道 !important 是能提高选择器的优先级，但IE是不支持的，这点需要注意一下。

CSS / padding

给某个标签设置 padding 属性后会增加其宽度和高度，但 IE 不会， 所以可以到上面的用 !important 多设一个 height 和 width 来解决。

CSS / 透明问题

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

其余浏览器下：opacity:0.6

CSS / 鼠标指针形状(手形)

cursor: pointer / hand

推荐使用 pointer ， 在些浏览器是不支持hand的。

CSS / div的垂直居中

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行

CSS / 浮动 IE 产生的双倍距离

 
#box{ 
     float:left; 
     width:100px;
     margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
}

在这种情况下可以设置 display:inline; 转为行内元素 ，使浮动忽略

JS / jQuery 动态调整

根据需要可用 JS / jQuery 做动态的调整

通常用到的就以上这些了，在使用中难免会遇到这些不可抗拒的因素，只有多了解才能更好的解决各种问题。

本文完 END

@本文作者: Cosplay，转载请注明来自Cosplay-前端笔记

本文地址：