2. css hack

CSS hack是通过加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的样式的目的。

但是需要注意的是

IE10及以上版本已将条件注释特性移除，使用时需注意。
尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。

对浏览前的选择

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

if条件 共包含6种选择方式

关键字	含义
空	指定是否IE或IE某个版本
`gt`	选择大于指定版本的IE版本
`gte`	选择大于或等于指定版本的IE版本
`lt`	选择小于指定版本的IE版本
`lte`	选择小于或等于指定版本的IE版本
`!`	选择除指定版本外的所有IE版本

/*小于对于 ie7 的版本*/
<!--[if lte IE 7]>
<style>
.test{
    
    color:red;}
</style>
<![endif]-->

对属性的选择

selector{
    
    <hack>?property:value<hack>?;}

不同的浏览前版本需要使用不同的 hack 关键字

hack关键字	hack生效的浏览前版本
`_`	选择`IE6及以下`。
`*`	选择`IE7及以下`。
`\9`	选择`IE6+`
`\0`	选择`IE8+`和`Opera15以下`的浏览器

.test {
    
    
	color: #090\9; /* For IE8+ */
	*color: #f00;  /* For IE7 and earlier */
	_color: #ff0;  /* For IE6 and earlier */
}

对选择器的选择

<hack> selector {
    
     

}

hack关键字	hack生效的浏览前版本
`_`	选择`IE6及以下`。
`*`	选择`IE7及以下`。
`\9`	选择`IE6+`
`\0`	选择`IE8+`和`Opera15以下`的浏览器

* html .test {
    
     color: #090; }       /* For IE6 and earlier */
* + html .test {
    
     color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) {
    
     color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) {
    
     color: #0ff; } /* For IE9+ and not IE */

不推荐使用的原因

CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。

现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

猜你喜欢