CSS hack:区分IE6，IE7，IE8，IE9，firefox

来源：互联网发布：石鑫台球网络教学编辑：程序博客网时间：2024/05/29 07:21

区别IE6与FF：

background:orange;

*background:blue;

区别IE6与IE7：

background:green !important;

background:blue;

区别IE7与FF：

background:orange;

*background:green;

区别FF，IE7，IE6：

background:orange;

*background:green !important;

*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

IE6IE7FF*√√×!important×√√
另外再补充一个，下划线"_",
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偏偏就让这种复杂的写法顺利通过校验呢？

/* 所有浏览器都为#000 */

.color{color:#000;}

/* IE6,IE7 方案一：* #cc0 */

.color{*color:#cc0;}

/* IE6,IE7 方案二：+ blue */

.color{+color:blue;}

/* IE7 为bold */

* + html .color{font-weight:bold;}

/* IE6 方案一: _ 为#c00 */

.color{_color:#cc0;}

/* IE6 方案二：* html c0c */

* html .color{color:#c0c;}

/* IE9 IE8支持*/

.color{padding-top:20px \0/IE9;}

/* IE9支持 */

:root .color{padding-top:70px \0/IE9;}

<div class="color">测试浏览器兼容</div>

0 0