目前网络上大部分关于ie8的hack都是测试版的，最有名的可能要数那张linxz.cn的hack图片了，这张图片估计被国内的网友转载了几十万次，但目前这张图里的方法对IE8正式版是无效的。
刚刚在网上看到一篇关于ie8正式版css hack的文章，就想收藏过来了。
以下的IE8均指IE8正式版,版本号:8.0.6001.18702
"\9" 例:"margin:0px auto\9;"。这里的"\9"所有的IE都识别，但Firefox不识别。 "*" IE6、IE7可以识别。IE8、FireFox不能。 "_" IE6可以识别"_"，IE7、IE8、FireFox不能。
如此，就可以完全区分开IE6、IE7、IE8、FireFox了。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>区别IE6、IE7、IE8、FireFox的CSS hack</title> <style type="text/css"> #test,#note{margin:0 auto;text-align:center;} #test{width:200px;height:30px;border: 1px solid #000000;color:#fff;line-height:30px;} .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background-color: #009933; /*IE6会变为绿色*/ } </style> </head> <body> <div id="test" class="color">测试方块</div> <div id="note"> <strong style="color:#009933">IE6</strong> <strong style="color:#0066FF">IE7</strong> <strong style="color:#FF0000">IE8</strong> <strong style="color:#CC00FF">FireFox</strong> </div> </body> </html>
以前对于!important这个属性不是很关注，也不是很清楚他的用处。
刚才在老杨那看到他的一篇关于!important的应用，之后豁然开朗，原来!important也可以当做是ie6的hack。
看例子：
div{margin-left:20px;margin-left:40px;}
上面是ie6的一个经典BUG—-双边距BUG，就是说当一个层用到float，又用到margin的属性的时候，ie6就有可能把这个层的margin值解析为双倍的。
其中一种解决办法：
div{margin-left:20px;margin-left:40px;display:inline;}
就是给这个层加一个display:inline的属性，使ie6和其他浏览器的解析都是一样的，具体的原理这里我就不解释了。
还有一种办法：
div{margin-left:40px;_margin-left:20px;}
用_margin-left:20px;这个只有ie6才解析的hack来解决双边距的BUG。
今天要介绍的用!important来解决的办法：
div{margin-left:40px !important;margin-left:20px;}
因为ie6不支持!important规范，而ie7及以上版本、Firefox、Chrome都支持!important规范，所以在ie7及以上版本、Firefox、Chrome浏览器中这个层的边距就是40px，而在ie6中，这个层的边距就会执行20px的语句了。
这也不失为一个ie6的小hack。
//update 2009.11.05
经honto提醒，这个方法已经不适用，因为Firefox3.5已经能解析这段代码。
Google于9月3号推出了浏览器Google Chrome，写前端效果的同志们又有得辛苦了，IE/FF/Opera/Safari/Google Chrome本来不太平的世界更混乱了。
所幸Google Chrome用的是与Safari一样的Webkit引擎，我们可以使用对safari相似的方式作css hack，写法为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>a <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于Google Chrome的hack的具体用法</title> <style> body:nth-of-type(1) .me{color:#ff0000;} </style> </head> <body> <div class="me">我在Google Chrome底下是红色的！</div> </body> </html>
转自:蓝色理想
原文地址:http://www.blueidea.com/tech/web/2007/5068.asp
翻译说明：
这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非常
感谢！
查看原文：http://diger.cn/blog/?p=324
英文地址：http://www.solidstategroup.com/page/1592
1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。
2、浏览器特定的选择器
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。
IE6以下
*html{}IE 7 以下
*:first-child+html {} * html {}只对IE 7
*:first-child+html {}只对IE 7 和现代浏览器
html>body {}只对现代浏览器(非IE 7)
html>/**/body {}最新的Opera 9以下版本
html:first-child {}Safari
html[xmlns*=”"] body:last-child {}要使用这些选择器，请在样式前写下这些代码。例如：
#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重写上面的代码并且把宽度改为250PX
在IE6以下版本中适用。 */3、在IE6中使用透明PNG图片
继续查看全文
作者：小毅
出处：毅博客
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。