CSS Hack

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

 

如果是做一个大型web网站，就一定会考虑到浏览器兼容的问题。不同的浏览器因为其内核不同所以对应的可以解析到的CSS写法也是不同的。

 

▍条件注释法

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
    
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
    
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
    
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
    
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

 

▍属性前缀法

前缀	浏览器
-moz-	Mozilla内核浏览器：firefox3.5+
-webkit-	Webkit内核浏览器：Safari and Chrome、Opera新版
-o-	Opera浏览器早期
-ms-	IE9
无前缀	W3C标准

【注意】这些前缀并不是所有属性都需要的，但是带上也不会有危害。

【重要】不带前缀的版本一定要放在带前缀的版本的后面。

 

▍示例

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