【转载】CSS样式：浏览器之间样式区分

来源：互联网发布：质量好的女装品牌知乎编辑：程序博客网时间：2024/05/29 15:24

按顺序进行：
FF、IE8: background-color:#000000 !important;
IE7: >background-color:#990000 !important;
IE6: background-color:#FFCC00;

====================================================================
参考：
跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版本众多，还有一个重要的原因是相同浏览器的不同时期的版本也会有差异，甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多，具体可以查看：

  本文据说的主要是通过“.”，“>”，“*”，“_”来区分。以下是本人对这四种符号的测试结果：
———————IE6——    IE7——IE8——FF2——FF3—    Opera9.5
>property——    Y——    Y——    Y——    N——    N——    N
.property——    Y——    Y——    Y——    N——    N——    N
*property——    Y——    Y——    Y——    N——    N——    N
_property——    Y——    N——    N——    N——    N——    N

我们可以看到>property、.property、*property在各浏览器中的表现是一致的，只有_property在IE6和IE7、IE8中有所区别。另外还要注意的，IE6是不支持!important的，而其他几款浏览器都识别。

举例：
要对想同的文字在不同浏览器中显示不同的颜色可以使用：

view plaincopy to clipboardprint?

color:brown !important; /*用于Opera、Firefox2、Firefox3等现代浏览器*/
>color:green !important; /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/
color:red; /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/


color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/
>color:green !important;    /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/
color:red;  /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/

因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说，只有IE6才能识别，因此可以用于单独对IE6的设置中。

不过这里要注意书写的顺序：现在浏览器的写法要写在最前面，IE6的写法要写在最后面用于覆盖，其他浏览器写在中间。

大多数人认为，Internet Explorer 6不支持CSS中的!important属性，这其实是一个认识误区，具体分析请看关于Internet Explorer 6（IE6）不支持CSS中!important属性

=========================================================

区别不同浏览器，CSS hack写法，从网上看到很多文章，现总结一下，尽量全面一点，备查。
注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上

区别IE6、7与FF/IE8：
background:blue;*background:orange;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

那么效果将不一样！此外，这里所说的IE8，不是指IE8的兼容模式，因为IE8的兼容模式其实就是IE7。

引用

显示效果：
IE 6/7：orange
FF/IE8:blue
原理：FF/IE8不支持*开头，而IE6/7都支持。

区别IE6与IE7/IE8/FF：
background:green;_background:blue;

引用

显示效果：
IE7/8/FF：green
IE6:blue
原理：IE6支持下划线"_"，IE7、8和firefox均不支持下划线。

区别FF/IE8和IE6/7：
background:orange;+background:green;-background:blue;
或者
background:orange;*background:green!important;*background:blue;

引用

显示效果：
IE6：blue
IE7：green
FF/IE8:orange
原理：IE6能识别-，IE7能识别+，IE8和FF都不能识别+和-
IE8/FF都不识别*，IE7优先识别!important，IE6不能识别!important。

关于IE8的hacks：
.test{
    color:/*\**/#00f\9; /* IE8 only */
    color:#00f\9; /* 适用于所有IE版本 */
}

可同时区分IE8、IE7、IE6、Firefox的CSS hacks：
.test{
    color:#000; /* Firefox */
    color:/*\**/#00f\9; /* IE8 */
    *color:#f00; /* IE7 */
    _color:#0f0; /* IE6 */
}

0 0