【每日一步】CSS Hack 总结_css实践总结

【每日一步】CSS Hack 总结由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“css实践总结”。

浏览器越来越多，不同的浏览器，不同的版本在页面的渲染上都各不相同。这让网页开发人员很头疼，为了能兼容各个浏览器，人们挖掘出了很多 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。

Hack:

#test{

color:red;/*所有浏览器*/

+color:blue9;/*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必须要有头部以及有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太多，管理起来也是个麻烦事。如果就差几个像素也没什么。对于一些市场占有率很小的浏览器只要做到不乱，功能可用就可以了。我们需要的是在主流浏览器中达到最好效果。