asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0

浏览器越来越多,不同的浏览器,不同的版本在页面的渲染上都各不相同。这让网页开发人员很头疼,为了能兼容各个浏览器,人们挖掘出了很多 CSS Hack。下面进行一下总结,如果还有其他的 CSS Hack 欢迎提供。

一) 针对 IE 的 Hack

大部分 CSS Hack 都是针对 IE 的,这是用于我们的 IE "坚强"所致,尤其是 IE6。
#test {
    color:red; /*所有浏览器*/
    +color:blue; /*所有 IE */
    _color:green; /*IE 6及以下*/
    _color /**/:pink; /*IE 5*/
}

由于 CSS 是后面的覆盖前面的。所以以上 CSS 分别对应 非IE,IE7,8,IE6,IE5。以上 Hack 基本可以满足需求。
不过 IE 还有一些其他的 Hack。

\9 Hack:

#test {
    color:red; /*所有浏览器*/
    +color:blue\9; /*IE 5 以上*/
}

在属性后面加个 "\9" 就可以了。你可能会奇怪:其他的数字不行吗?我试了下,好像是不行,不过 9 前面可以加几个 0。我觉得这个不必深究,能用就行了。

* html Hack:

#test { /*所有浏览器*/
    color:red;
}
* html #test { /*IE 6及以下*/
    color:blue;
}

这个 Hack 用于区分 IE6 和其他浏览器。在 CSS 属性比较多的情况下比较有用。值得一提的是,这个 Hack 是符合标准的。

[xmlns] Hack:

刚刚的 "* html" Hack 是 IE6及以下支持,其他浏览器不支持。 "[xmlns]" Hack 刚好相反。
[xmlns] #test { /*IE 6及以下不支持*/
    color:green;
}

注意:这个 Hack 要求HTML 必须要有< !DOCTYPE >头部以及有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 Dreamweaver 默认新建的网页都会自动加上

Mac 下 IE Hack:

/*\*//*/
#test {
    color:blue;
}
/**/

二) 针对 Gecko(Firefox, Netscape) 的 Hack

@-moz-document url-prefix(){
    #test {
        color:yellow;
    }
}

包含在 @-moz-document url-prefix(){} 之间的 CSS 只有 Gecko 内核的浏览器才会支持。所以对于 Firefox 可以用这个 Hack。

三) 针对 KHTML(Chrome, Safari), Opera 的 Hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #test {
        color:blue;
    }
}

Chrome, Safari, Opera 支持以上代码,而其他浏览器不支持。

四) 针对 Opera 的 Hack

第一种方法

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #test {
        color:#99ff99;
    }
}

包含在 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {} 之间的 CSS 只有 Opera 才能解析。

第二种方法

body:empty #test {
    color:yellow;
}

以上 Hack 基本能区别大部分浏览器。不过我觉得 Hack 能不用最好还是别用,除非非用不可。因为 Hack 太多,管理起来也是个麻烦事。如果就差几个像素也没什么。对于一些市场占有率很小的浏览器只要做到不乱,功能可用就可以了。我们需要的是在主流浏览器中达到最好效果。

posted on 2009-11-20 18:44 汪杰 阅读(202) 评论(0)  编辑 收藏 引用 所属分类: divandcss
只有注册用户登录后才能发表评论。

<2006年4月>
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 467490
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜