IE6，IE7，IE8，Firefox 兼容的css hack

如果你问一个前端工程师世界上最痛苦的事情是什么，十有八九都会回答浏览器差异。由于IE6的异常表现加上国内盗版XP系统的横行再加上XP默认绑定IE6人们一般不会去升级浏览器，导致浏览器的差异始终是前端工程师头疼的事情。

CSS hack由于不同的浏览器， 比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏 览器写不同的CSS code的过程，就叫CSS hack!

这里主要讨论IE6、IE7、IE8和FireFox的差异。

 

先介绍三个符号：“ * ”、“ !important ” 和“ _ ”。

!important可被FireFox和IE7识别，* 可被IE6、IE7识别，IE8和FF不能识别，_ 可被IE6识别，IE7、IE8、FF不能识别，'\9'能被ie识别（ie6、ie7、ie8），'\0' 能被IE8、ie9识别，IE6、IE7不能，'\9\0' 只能被ie9识别。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

如要区别IE6、IE7、FF浏览器只需要这样写：

background:orange; *background:green; _background:blue;

书写的顺序是firefox的写在前面，IE7的写在中间，IE6的写在最后面。这样FF下的背景色是橙色，IE7下的背景色是绿色，IE6下的背景色是蓝色。这只是其中一种Hack写法，只要记住这三个符号，基本可以解决所有问题。

兼容IE6/IE7/IE8/FF的写法，注意下面的顺序不可颠倒：

border:2px solid #00f;     //蓝色

border:2px solid #0f0\9;   //绿色

border:2px solid #f90\0;    //橙色

_border:2px solid #f00;    //红色

FF下蓝边，IE6下红边，IE7下绿边，IE8下橙边。

IE专用的条件注释

 

（lte：就是Less than or equal to的简写，也就是小于或等于的意思。lt ：就是Less than的简写，也就是小于的意思。gte：就是Greater than or equal to的简写，也就是大于或等于的意思。gt ：就是Greater than的简写，也就是大于的意思。! ：就是不等于的意思，跟javascript里的不等于判断符相同）

例如下面