日期:2014-05-17 浏览次数:20754 次
区分 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,
?
*?
?
------