关于IE6/IE7/IE8中CSS 兼容性HACK

Hack

相信很多人听说过Hack，就是在CSS代码里加入一些如* html,+hmtl, /**/，这些代码在IE里能被识别，其它浏览器不能，也有些IE6可以，IE7不能识别，就是通过这样的方法，来写针对不同浏览器的CSS代码。

这里有几篇文章是介绍Hack的，还有收集了目前的一些Hack，可以点过去看看。先别急着点，继续往下看吧。最后我才把链接贴上，因为下面的内容更重要。比你漫无目的找HACK实用。

这里介绍几个经典的区别不同浏览器，CSS hack写法太多了，也很杂，这里我就介绍几款实用的，又容易记的写法：

------------------------------经典方案一---------------------------------

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

写两句代码来控制一个属性，区别Firefox与IE6：
background:orange;*background:blue;

//这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；

写两句代码来控制一个属性，区别IE7与IE6：
background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。

写两句代码来控制一个属性，区别Firefox与IE：
background:orange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*

写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

以上HACK用法，可以实现不同浏览器的CSS代码，但是却不能通过CSS代码验证工具的验证！其实通不通过都无所谓，主要是实用，至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。

附加一個頹廢的剌猥發現的HACK，就是在IE6,還能識別全角的字符，IE7不行，這個也可以利用。在百度空間中，這個方法在2007-04-29日，還沒被過濾！

--------------------------------经典方案二------------------------------------

下面介绍用* html,* +html的hack写法，此方法可以通过CSS验证，也比较规范。哈哈，HACK本来是不归范的产物，只是我个人认为这种Hack写法是Hack写法中的规范而已，不要拿东西砸我！！！

我写一个例子

#sample {background:red;}

* html #sample {backgroud:green;}

* +html #sample{backgroud:blue}

在DW中建立一个sample层，写入以上代码，运行一下看看，你会在Firefox或是Netscape或Opera中看到，sample的背景色是红色的。在IE6中看到背景色是绿色的，而在IE7中却是蓝色的。好玩吧~

同样，你也可以应用到class和body中去，一样的道理，三个写法:

第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。

第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。

第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。

---------------------------------第三种方案（强力推荐）--------------------------------

这里先说声不好意思，第三种方案不是用HACK，哈哈，但是绝对是最好用的。

第一种或是第二种方案，写出来的CSS文件代码长的很，特别是第二种，这样载入CSS时，会很缓慢，对网站设计没有好处。如果你做的是比较大的网站，还是建议你用下面这种方法，就是通过javascript判断浏览器的类型，然后针对不同的浏览器链接不同的CSS文件。

我们针对不同的浏览器开发出不同的CSS文件，一个针对IE，一个针对Firefox，一个针对其它所有类型的浏览。这样，我们在设计时，就不用去考虑太多，只要我这个CSS能在FF中正常显示，我就不管IE下执行下怎么样了，同样IE中正常的CSS，也不去管它在FF中会是显示如何的乱。

首先，我们在HTML代码里要放入<link></link>标签，标签里先写入默认要用到的CSS文件的位置，建议放IE中用到的CSS文件，比如<link href="../css/ie.css" rel="stylesheet" type="text/css">，这样能避免在对方浏览器没有开启javascript的时候，无法判断浏览器类型的时候，也能以90%以上人使用的IE正常显示。

把下面这段JS放在HEAD中

<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果浏览器为IE，调用../css/ie.css
setActiveStyleSheet("ie.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox，调用../css/firefox.css
setActiveStyleSheet("firefox.css");
}else{
//如果浏览器为其他，调用../css/other.css
setActiveStyleSheet("other.css");
}
}

function setActiveStyleSheet(title){
        document.getElementsByTagName("link")[0].href="../css/"+title; //document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签，改为1，则表示第二个名为<link>的标签。href=“”里面就是放置CSS文件的路径，而title就是CSS文件的文件名
}
//-->
</SCRIPT>
window.navigator.userAgent.indexOf后面是浏览器的类型，如果是Opera的话，还可以加一条if来判断，用javascript 的条件判断去写吧，我这里不多说了。

放好你的CSS的位置，试一下看看，是不是不同的浏览器分别调用了不同的CSS文件啊。爽！

好了，到这里，相信你明白第三种方案的好处了吧。我喜欢最后这一种多一点。其实第三种方法还能更进一步的设计，比如我，这次做的网站，只实现在IE6和IE7中正常浏览，其它的，我可不管，不要骂我支撑了MS的霸权，但是人家公司啊，会去看他们网站的，都是一般客户，一般客户都是用IE的，我们技术人员才会用Firefox,Opera。所以我加入了alert，弹出窗口，不信你用Firefox浏览一下我做的网站，创汇科技，如何？是不是弹出窗口，告诉你说可能会不正常，建议你用IE的对话框。哈哈，其它的，就发挥你的想像力和创造力啦。

------------------------------一些HACK的收集--------------------------------------

哈哈，看完文章了吧，这里就给一些链接吧，如果你不满足以上的方法，或是你别有他用！请点下面的链接！

CSS Hack的资料收集,先放几个，累了，以后有时间再放一些上来吧