最全面、最简要的CSS Hack总汇（网上收集）

来源：互联网发布：电脑卫视直播软件编辑：程序博客网时间：2024/04/29 19:20

前几天，我自己心血来潮，写了一篇《CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳》的文章，后来在网上看到了一篇也是写CSS Hack的文章，看了之后发现自己水平太一般了。这篇文章启发我们CSS hack的写法并不只局限于CSS属性里、CSS选择器里，还在于CSS注释方法、Javascript识别调用方法里边，看了之后让我大开眼界，这应该是我在网上百度这么多CSS Hack文章以来最全面、最简要、最好的一篇，大家一定要好好收藏啊，它会对你以后CSS Hack的编写很有帮助的。原文如下：

关于hack的使用与否实在是众说纷纭
我觉得我目前是经历了这么一个阶段
不使用（刚开始那会都不知道什么事hack嘛，肯定不用）
↓↓
使用（那会以为自己学成乾坤大挪移了）
↓↓
不使用 （进阶到一种职业状态后觉得用就是一种耻辱，关键是项目规范了，写法自然兼容性高）
↓↓
一点点的用（火烧屁股的时候，特别是二次开发擦别人屁股的时候，效率是关键。重构得理性。）
↓↓
？？（未知，可能更多专注真体验，游走于理论和实践。一句话偷懒是讲技巧的。我们所谓的UE语义化啊什么化的不都是为了更好的偷懒么….）

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
可维护：在资源成本和完美间平衡的向后兼容
可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack这种写法的优缺点是：

1
2
3
4
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .sofish{display:block;}
}

优点：全面，各种HACK都有；清理无用代码里易认
缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack这种写法的优缺点是：

1
2
3
4
5
6
7
8
.sofish{
padding:10px;
padding:9px/9; /* all ie */
padding:8px/0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */　
}

优点：易记；代码少
缺点：不全面

三、IE 注释

1
2
<!--[if IE]>IE only<![endif]-->  
<!--[if !IE]>NOT IE<![endif]-->  

这种写法的优缺点是：

优点：安全；向后兼容好；易维护
缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

1
2
3
4
// 以jQuery为例，检测是否是IE6，是则加上class="ie6"  
if ($.browser.msie && $.browser.version = 6 ){  
$('div').addClass('ie6');  
} 
这种写法的优缺点是： 
优点：全面；易维护；可读性高
缺点：占资源；代码量大（要重写选择器）
上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择： 
尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；
向后兼容的目标：1年
你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px/0;这 样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响 2个浏览器，也会更方便；
尽可能省资源
你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。
五、个人推荐写法
其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家 参考的。 
经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.sofish{
padding:10px;
padding:9px/9; /* all ie */
padding:8px/0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */　
}
 
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
 
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
 
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
 
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
 
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*HTML: 添加body class*/  
<!--[if IE6]--><body class="ie6"><![endif]-->  
<!--[if IE7]--><body class="ie7"><![endif]-->  
<!--[if IE8]--><body class="ie8"><![endif]-->  
<!--[if IE9]--><body class="ie9"><![endif]-->  
<!--[if !IE]--><body class="non-ie"><![endif]--> 
 
.sofish{padding:10px;}  
.non-ie .sofish{padding:12px;} 
.ie9 .sofish{padding:9px;} 
.ie8 .sofish{padding:8px;} 
.ie7 .sofish{padding:7px;} 
.ie6 .sofish{padding:6px;} 
 /* webkit and opera */ 
@media all and (min-width: 0px){ .sofish{padding:11px;} }  
 
 /* webkit */ 
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
 
 /* opera */  
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
 
 /* firefox * / 
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
 
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */  
然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或 者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。 
至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考： 
六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red }
 
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 #diez { color: red }
}
 
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) { 
      #veintiseis { color: red }
}
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
 
/* Everything but IE6-8 */
:root *> #quince { color: red }
 
/* IE7 */
*+html #dieciocho { color: red }
 
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
 
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
 
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue/9; }
 
/* IE7, IE8 */
#veinte { color/*/**/: blue/9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。 
来自: http://hi.baidu.com/kingtent/blog/item/78e70e12e4a4045df919b839.html 
希望上面这篇文章对大家有用，如果大家有什么好的Hack、好的技术的话，别忘了与我分享哦，谢谢~