一、预备知识
1、Css Hack简介
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

2、Css Hack原理
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
　　Css Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSSHack主要针对IE浏览器
　　类内部Hack：比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
　　选择器Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
　　HTML头部引用(ifIE)Hack：针对所有IE：<!--[ifIE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if ltIE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在后面
3、如何写Css Hac
       比如要分辨IE6和firefox两种浏览器，可以这样写：
　　<style>
　　div{
　　background:green; /* for firefox */
　　*background:red; /* for IE6 */
　　}
　　</style>
　　我在IE6中看到是红色的，在firefox中看到是绿色的。
　　解释一下：
　　上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
　　在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
　　CSS hack:区分IE6，IE7，firefox
　　区别不同浏览器，CSS hack写法：
　　区别IE6与FF：
　　background:orange;*background:blue;
　　区别IE6与IE7：
　　background:green!important;background:blue;
　　区别IE7与FF：
　　background:orange; *background:green;
　　区别FF，IE7，IE6：
　　background:orange;*background:green;_background:blue
　　background:orange;*background:green!important;*background:blue;
　　注：IE都能识别*;IE8、标准浏览器(如FF)不能识别*；
　　IE6能识别*，某些情况下不能识别 !important,
　　----------------------------------------------------------------------------------------------
　　IE6支持重定义中的!important，例如：
　　.yuanxin {color:#e00!important;}
　　.yuanxin {color:#000;}
　　你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
　　但不支持同一定义中的!important。例如：
　　.yuanxin{color:#e00!important;color:#000}
　　此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。
　　不包括如下这种形式的同一定义中的!important。
　　#pageOver{height:expression(document.documentElement.offsetHeight)!important
　　height:100%;}此种形式的定义，IE6中是可以解释到important的。
　　-----------------------------------------------------------------------------------------------
　IE7能识别*，也能识别!important; 
　FF不能识别*，但能识别!important;
　　                IE6 IE7 FF
　　           *     √   √   ×
　　!important ×    √   √
　　浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
　　以: " #demo {width:100px;} "为例;
　#demo{width:100px;} /*被FIREFOX,IE6,IE7执行.*/
　* html #demo{width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
　*+html #demo{width:130px;} /*会被IE7执行*/
　---------------
　所以最后,#demo的宽度在三个浏览器的解释为:
　FIREFOX:100px;
　ie6:120px;
　ie7:130px; 
　IE8 最新css hack：
　"\9"　例:"border:1px\9;".这里的"\9"可以区别所有IE和FireFox.
　"\0"　IE8识别，IE6、IE7不能. 
　"*"　IE6、IE7可以识别.IE8、FireFox不能. 
　"_"　IE6可以识别"_",IE7、IE8、FireFox不能. 
二、CSS兼容解决方案：
1、利用IE的类内部写CSS Hack
1、*：IE6+IE7都能识别，FF+IE8不能识别；
2、!important：IE7+IE8+FF都能识别(但是IE6也能识别重定义中的!important)；
3、_：除IE6支持_外，IE7+IE8+FF都不支持；
4、\9：所以IE浏览器都能识别(IE6、IE7、IE8)、FF不能识别
下面示例测试都成立:
(1)区别FF(IE8)与IE6 IE7
backgorund:orange; FF和IE8背景色将为橘黄色
*backgorund:red;   IE6和IE7背景色将为红色
(2)区别FF(IE8)与IE6与IE7background:orange;   FF和IE8背景色将为橘黄色
*background:red !important;  IE7背景色将为红色
*background:blue;     IE6背景色将为蓝色
(3)区别FF(IE8)与IE6与IE7
background:orange;        FF和IE8背景色将为橘黄色
*background:red;          IE7背景色将为红色
_background:blue;         IE6背景色将为蓝色
(4)区别FF与IE6 IE7 IE8IE9
color:gray;       FF等非IE浏览器字体色将为灰色
color:red\9;     IE8 IE9字体色将为红色
*color:green;     IE7字体色将为绿色
_color:blue;     IE6字体色将为蓝色
提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！
总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.
以上在IETester中进行的IE6、IE7、IE8测试,Firefox3.6进行的测试。
2、通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义
1)简介：
条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE，条件注释（Conditionalcomments）将会以最高版本的IE为标准。
     条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。
   通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的。
a、条件注释的基本结构和HTML的注释(<!––>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
b、IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
c、条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。
可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）
<!–[if IE]>
       <h1>您正在使用IE浏览器</h1>
       <!–[if IE 5]>
           <h2>版本 5</h2>
       <![endif]–>
       <!–[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]–>
       <!–[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]–>
       <!–[if IE 6]>
           <h2>版本 6</h2>
       <![endif]–>
       <!–[if IE 7]>
           <h2>版本 7</h2>
       <![endif]–>
<![endif]–>
那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–[if ls IE 5]>根本不会被执行。
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同
2）语法：
<!–[if IE]>
    这里是正常的html代码
<![endif]–>
3)例子：
<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css"href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css"href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css"href="ie.css" />
<![endif]–>
这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。
注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后
3、用JS判断不同的浏览器载入不同的cs
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//根据不同的浏览器调用不同的CSS!
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
document.write('<link  href="ie.css" type="text/css" rel="stylesheet" />');
}else{
document.write('<link  href="ff.css" type="text/css" rel="stylesheet" />');
}
</script>
</head>
<body >
<div id="box"> 在不同的浏览器下，这行字的色应该不同！</div>
</body>
</html>