IE6 | IE7 | FF | |
* | √ | √ | × |
!imp | × | √ | √ |
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
selector { +property:value; } 在属性名前加上加号"+",只有IE6+IE7可以识别.
selector { *property:value; } 在属性名前加上星号"*",IE6+IE7都能识别,而标准浏览器FF+IE8+IE9是不能识别.
!important: 除IE6不能识别外, FF+IE9+IE8+IE7都能识别!important ;
selector { _property:value; } 在属性名前加上下划线"_",只有IE6识别.
* html selector{ property:value; } 只有IE6识别.
*+html selector { property:value !important; } 只有IE7识别.
:root .tab {padding-bottom:2px \0/IE9; /*只有IE9 hack 识别,注意: 1、 :root是IE9新加的特征;2、前面的空格 让IE8忽略之 */} 参考: IE9 Only CSS Hack
html/**/ >body selector { property:value; } 只有IE系列 (除IE7外) 可以识别.
selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector/**/ { property/**/:value; } 屏蔽IE5和IE6用 (不屏蔽IE5.5) .
select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.
区分IE6和IE7以及FF,如
#abc{background:orange;*background:green;_background:blue;} 这种写法很简单,但是以上写法,是不能通过W3C的CSS验证的!
可以顺利通过校验:
1、当IE6、IE7、FF都不同效果时,用以下HACK:
#abc{ background:orange } /* FF */
*+html #abc{ background:green } /* IE7 *+html 对IE7的HACK 必须保证HTML顶部有如下声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">*/
* html #abc{ background:blue } /* IE6 */
2、当IE6不同效果,IE7以及FF相同效果时,用以下HACK:
#abc{ background:orange !important;background:blue }
为什么最好用可以通过校验的HACK写法,使得CSS的代码可以顺利通过校验的原因! *和_这两种写法能在浏览器里解析出来,但W3C的校验为什么不给予通过? 而*+html和* html这两种写法一样能在浏览器里解析出来,可为什么W3C偏偏就让这种复杂的写法顺利通过校验呢?