日期:2014-5-17 浏览次数:20119次

区分 ie678 firefox 的 css

区分 ie678 & firefox 的 css

?

------

区分浏览器的几个准则:

?

'_'

ie6 可以识别以 '_' 开头的 标记,比如:"_margin-left",而 ie78,firefox 都不能,

?

'*'

ie6,7 都可以识别 以 '*' 开头的 标记,比如:"*background",而 firefox & chrome & ie8 都不能,

?

' !important'

该有该后缀的属性 优先级高,

可被 ie78 firefox 识别,

ie6 忽略其优先级 对ie6而言这种属性和其他属性是一样的,因此先后顺序对 ie6 有影响,

?

多次定义

ie78 firefox 都以最后1个优先级最高的有效属性为准,

ie6 不能区分优先级,仅区分定义顺序,以最后1个定义的属性为准,

?

------

技巧总结:

?

区分 ie6:

使用 '_' 开头的标签,

?

区分 ie7:

使用 '*property:value !important',

使用该属性特别指定 ie7时,应当注意该属性对 ie6也有效,只不过 ie6不区分优先级,因此可以在该属性后,再定义1个 * 或 _ 以专门为 ie6 指定属性值,

?

区分 firefox:

默认的属性就应当是适用于 firefox 的,然后如果 ie67 不兼容,则用 ie6,ie7 独有的语法来调整,

?

区分 ie8:

ie8 跟 firefox 差不多,

?

区分 ie67:

使用 '*',仅有 ie67 支持这个语法,

?

------

例子:

?

* 以 background 为例,区分 ie678 firefox:

?

css 代码:

		.div_one {background:red;*background:yellow !important;*background:green;width: 200px;height: 100px;}

		或

		.div_one {background:red;*background:yellow !important;_background:green;width: 200px;height: 100px;}
?

分析:

firefox & ie8: 不能识别 * 或 _ ,所以使用 background:red,

ie7: 可以识别 !important,其优先级高,因此使用 *background:yellow !important,

ie6:?

可以识别 * ,忽略 !important,因此使用后面的 *background:green,

可以识别 _ ,忽略 !important,因此使用后面的 _background:green,

?

*?

?

------