在不同浏览器下写css是件很麻烦的事，网页设计者往往要在css hack上花费一两天的时间，本文较为全面的为读者讲解如何高效的写css hack。
一、文件结构 ↑
好的css文件结构帮助你快速解决css hack问题，在此之前，你必须明白对于同一个css样式，写在后面的样式规定将覆盖写在前面的，因此，当你想要修改某个样式，却无法从你原有的css文件中找到该样式时，你要做的是在目前已经针对某个浏览器写好的css中做好覆盖，然而这是不值得提倡的，开发者应该在撰写时就想到这个问题。
然而，开发者还会遇到一个问题，就是当写完某个局部的样式时为了快速看到撰写或修改效果，需要在浏览器和css编辑器之间不停转换，而针对某些细节处理，还要不停的在网页源代码和css文件中查找，耗费了大量时间，这是不可避免的。
乌徒帮推荐的方式有两种：
1、在撰写时即考虑hack，并和原有写好的css样式放在一起，这样的好处是当修改某个细节的样式时，可以在找到该样式时同时修改hack，从而兼容所有浏览器；
2、将hack css写在新的hack.css文件中，这样的好处是在hack.css文件中将所有hack一览无遗，很清晰各个hack的最终作用；
当然，还有人在原有的css文件中独立选择一块或几块区域写hack css，这个方法其实和方法2是同一个道理，只不过相对来说显得更复杂更纠结一些。
至于选择用什么样的方法，由读者自己选择。
二、了解不同浏览器造成css样式效果不同的原因 ↑
具体原因由于笔者没有收集，不述。了解css样式效果不同浏览器下不同的原因，有助于css撰写者在写css时选择用第一种方法来写hack。当撰写者了解问题产生的原因之后，可以根据自己的需求，选择自己第一兼容的浏览器，然后兼顾其他浏览器，并且帮助撰写者在写css的时候时刻提醒自己某些样式会在不同浏览器下产生不同效果，做到心中有数。
三、如何hack当前最流行的谷歌、火狐、safari、IE9、IE8及以下IE系列、opera浏览器 ↑
由于开发者的喜好，国产浏览器往往不被考虑在内，而对于国产浏览器，多数以IE7的CSS为基础，开发者可以根据自己的选择进行下一段中笔者所提问题。
在写hack之前，开发还遇到一个问题，就是第一兼容什么浏览器为宜。对于习惯用firefox最为第一开发浏览器的开发者更应该考虑这个问题，原因有二：
1、网站的用户主要用什么浏览器，哪些浏览器肯定不会用？
2、对于写hack来说，先兼容什么浏览器，然后再写其次、再次浏览器的hack更好？
如果先写谷歌浏览器的css，然后再写其他浏览器的css hack，比先写火狐浏览器的css再来写兼容谷歌浏览器的css hack更快的话，我想先用谷歌浏览器作为测试css效果会事半功倍。
那么不同浏览器的hack到底有哪些呢？本文作如下总结，以.test {margin:5em;}为例：
从一般意义上讲，chrome和safari的hack一样，虽然两者在细节上可能并不完全一样，然而chrome用的是safari的核心（Webkit内核），因此目前还没有针对区分这两者之间的hack。它们共用的hack是：
@media screen and (-webkit-min-device-pixel-ratio:0){
.test {margin:5em;}
}
在国外的一些网站上，我仍看到了一些不一样的hack，显得简单低调：
/*\*/
html>body*.test {margin:5em;}
/**/
http://cssherald.com/153/google-chrome-and-apple-safari-css-only-hack/
.test {
margin:5em;
[color:red;
color:blue;]
}而在另外一篇文章中提到只需要前中括号[
[color:red;color:blue;
他们是一整行，不能换行，后面的会覆盖前面的，虽然意思甚明白，但笔者估计为[指样式从新开始。后中括号]将再后文中提及
在这个案例中，[]内第一个color针对opera,第二个则针对safari
http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
而在国内，还有如下的独特hack，也和opera共有，但对于已经支持css3的所有浏览器，这种欺骗并不高明：
body:nth-of-type(1) .test {margin:5em;}
还有一种hack则用到伪类:empty
.test:empty {margin:5em !important;}
需要注意的是此处也用到了!important,阅读下文时不应忘记。
firefox浏览器的hack为独有，不过很多文章中将它和IE7等浏览器的hack等区分开来。
@-moz-document url-prefix(){
.test {margin:5em;}
}
通过这个独有的hack足以解决火狐浏览器css hack问题。当然，你仍然需了解firefox和IE7同享下面的hack：
.test {margin:5em !important;}
IE浏览器的hack比较多，可以说五花八门，而且不同版本之间又不相同，更好玩的是有些hack被Opera抢走，让开发者对IE浏览器的情有独钟。
IE浏览器都能使用的hack：\9
.test {margin:5em \9;}
IE9浏览器的hack，我所看到的有两个：
:root .test {margin:5em\9; }
:root .test {margin:5em\0; } //这个hack opera也支持
IE8浏览器和opera的hack：\0
.test {margin:5em \0;}
而据我所读，单独的一个反斜杠也是IE8所支持
.test {margin:5em;\}
但反斜杠的位置在分号之后，是否绝对可行，请看http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
IE7浏览器则有好几种hack，除了上文提到的在分号前加!important;之外，还有如下几种：
.test{+margin:5em;}
.test{*+margin:5em;}
.test{*margin:5em;}
*+html .test{margin:5em;} //必须做http://www.w3.org/TR/html4/loose.dtd 的html声明
在http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx一文中还提到一处，
html*.test{
[color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh,
which is addressed below.*/
color:blue;/*Affects Google Chrome (v1-2) and Safari for Macintosh (v1-3). Seen also by IE5-6, but that's addressed below.
Also hidden from older Firefox and Netscape browsers.*/
]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all Firefox
and Netscape browsers.*/
}
IE6浏览器的hack也很多，主要有：
.test{*margin:5em;}
.test{_margin:5em;}
*html .test{margin:5em;}
最后提及opera浏览器的hack，除了上文已经提到过很多处opera之外，它的最独有的一个hack如下：
@media all and (min-width:0px){
.test{_margin:5em\0;}
}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.test{margin:5em;}
}
四、如何选择和排布浏览器之间的hack ↑
开发者在面临庞大的css hack知识后，迎面的是技巧，怎样快速高效的使用这些hack，从而让代码更精简的同时又更兼容浏览器。
1、挑出所有浏览器的唯一hack：
:root .test {margin:5em\9; } //IE9
.test {margin:5em;\} //IE8
.test{*+margin:5em;} //IE7
.test{_margin:5em;} //IE6
@media screen and (-webkit-min-device-pixel-ratio:0){
.test {margin:5em;}
} //chrome and safari@-moz-document url-prefix(){
.test {margin:5em;}
} //firefox@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.test{margin:5em;}
} //opera
2、合并能合并的
3、选择如何覆盖：在确定了自己的第一兼容浏览器之后，撰写最最大兼容性的css，写成之后，在其后面用最大兼容性的hack覆盖对应的样式，最后用独有的hack对少数浏览器加工。
例如我写的是：
.test{
margin:5em;
_margin:4.7em;
}
:root .test {margin:4.5em\9; }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.test{margin:4.65em;}
}
