CSS Hack的一些写法
参与测试的浏览器：IE6，IE7，IE8，IE9 Preview，Firefox 3.67，Safari 5.0和Opera 10.0
以下是IE系列的Hack写法（注意顺序）：
.color {
color:#000;/* 所有浏览器支持 */
color:grey !important;/* 除IE6外，所有浏览器都支持 */
color:red\9;/* IE系列浏览器(ie6+)支持，但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
color:orange\0;/* IE8支持 */
*color:yellow;/* IE6,IE7支持 */
+color:#C0C;/* IE6,IE7支持 */
_color:blue;/* IE6支持 */
}
运行结果为：IE6文字颜色blue，IE7为#C0C，IE8为orange，其他浏览器（包括IE9 Preview）均为grey
此外，IE7支持如下写法：
*+html .bgcolor {
background-color:#FF99CC;/* 仅IE7支持“*+html” */
}
下面是IE6、IE5的一些写法（注意注释的摆放位置）：
html/* 注释 */>body .ie6 {
border:1px dashed #CCC;/* IE6，IE5支持 */
}
.nie6 {
display:/* 注释 */none;/* IE6不支持 */
}
.nie56/* 注释 */ {
display:/* 注释 */none;/* IE6，IE5不支持 */
}
除此之外，我们在使用浮动布局的时候，一个div块包含两个浮动的div块，往给这个父div块添加如下代码以清除浮动：
#box:after {/* 清除浮动,但IE6和IE7不支持 */
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
但遗憾的是，这种方法IE6、IE7不识别，往往我们使用在两个子div后添加空的div以清除浮动。
对于IE系列，我们还可以使用IE特有的注释，为元素添加特殊的样式以达到浏览器兼容，下面是常见的IE注释：
<!--[if IE]> HTML code <![endif]--> <!--[if IE 5,6,7,8...]> HTML code <![endif]--> <!--[if gte IE 5]> HTML code <![endif]--> <!--[if lt IE 6]> HTML code <![endif]--> <!--[if lte IE 5.5]> HTML code <![endif]--> <!--[if !IE]><!--> HTML code <!--<![endif]-->
lt ：就是Less than的简写，也就是小于的意思。
lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判断符相同。
参考：http://hszy00232.blog.163.com/blog/static/43022753201001553136921/
由于经常碰到需要写Hack的情况都是IE系列，所以其他浏览器基本没用到Hack的情况（个人觉得遵循标准的话，过多考虑非IE系列的兼容性，除非你的页面很花俏），下面是在网上遇到并经过测试的Hack写法：
div.text { /* 在越出长度后会自行的截掉多出部分的文字，并以省略号结尾,Firefox 3.67不支持省略号，而IE6不会截取文字IE其他版本完全支持 */
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
这种写法大多数浏览器支持。
下面是一种兼容Safari和Chrome的写法：
p {[color:#000;color:green;} /* Safari,Chrome支持 */
这种写法要注意，尽量把它们放在样式最后面，因为它们会使其后的所有样式失效！
接下来是两种伪类实现的兼容，感觉就是不同版本浏览器对css2.1或css3.0不同的支持程度：
.hack:empty { height:50px !important;border:1px solid #CCC; }/* IE6、IE7、IE8不支持，IE9、Firefox 3.67、Safari 5.0、Opera 10.0均支持伪类empty */
*:lang(en) p { background:#CCC !important; }/* IE6、IE7不支持，IE8、IE9、Firefox 3.67、Safari 5.0、Opera 10.0均支持伪类lang */
HTML代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> ...... <div class="hack">Hack</div> <div class="hack"></div> <div class="hack">Hack</div> <p>*:lang(en)</p>
运行结果为中间没有内容的div高50px，并有1px边框；p内文字背景颜色为#CCC
还有一种据说是针对Opera的：
@media all and (min-width: 0px){div.opera {border:1px soild #CCC;}}/* 针对Opera浏览器做单独的设定 */
关于兼容性，相信只有接触过的的朋友才深有体会，而Hack的内容也很多，很难列举完全，只有多实践才能克服对浏览器兼容性的恐惧。第一次写原创成分较高的文章，内容也会继续更新，欢迎高手们斧正！
