选择级hack符
* 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 */
/* 排除IE7*/
.test >/**/ .ppp {
color: red;
}
(>/**/) 虽然IE7支持对子选择器,但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候,IE7会不识别后面的规则,就和较早版本的浏览器一样。
(_) IE 6 及以下的版本可以识别带有下划线前缀的属性,而其它浏览器会忽略它。因此,一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性。
这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。
(*) 除了下划线和连字符,版本7及以下的IE可以识别以非字母字符为前缀的属性,而其它浏览器会忽略。
这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。
(html) HTML元素是W3C标准DOM的根元素,但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个 html选择器,但IE4-6却会对它正常处理。
条件级hack符
判断
如果把IE后的条件删掉则IE10以下都会看到其中的内容
<!--[if IE 5]>
<p>你好啊</p>
<![endif]-->
大于这个版本才能显示
<!--[if gt IE 8]>
<p>啦啦啦</p>
<![endif]-->
大于或等于这个版本才能展示出对应的内容
<!--[if gte IE 6]>
<p>啦啦啦</p>
<![endif]-->
在这个版本以下才能看到
<!--[if lt IE 7]>
<p>啦啦啦</p>
<![endif]-->
小于或等于这个版本才能看到
<!--[if lte IE 7]>
<p>啦啦啦</p>
<![endif]-->
除了这个版本以外都能看到(IE10以下)
<!--[if ! IE 9]>
<p>啦啦啦</p>
<![endif]-->
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。