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
来解决兼容性问题。