昨天对公司的网站进行了IE低版本的适配调整，调整了IE8以下的浏览器布局混乱，层次覆盖等等问题。一天的调整，整理结果如下：

1、CSS hack：区分IE6、IE7、IE8、Chrome、Firefox、Opera等

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

• IE低版本 （IE系列）都可以支持“*”，其他不支持

• IE6能识别"_"，但是IE7及其他不支持。

• IE6不支持!important，其他都支持

• IE7、IE7支持 {+color:#fff;}，IE8及其他不支持

• <!--[if IE]>这段文字只在IE浏览器显示<![endif]-->     <!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->

• <!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->

• <!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->

• <!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->

2、IE6不支持position:fixed;的问题

通过ie的CSS表达式(expression)来完美的实现ie6下position:fixed效果，css代码如下：

/* IE6浏览器的特有方法 */

* html .ie6fixedTL{position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.documentElement.scrollTop)) }

如果要设置元素悬浮边距，要分别为设置两次，比如我要让某个元素距顶部10个像素，距左部也是10个像素。

3、IE6下的z-index无效的bug问题；

如果没有设置父元素（祖先元素）的z-index，IE6按先后出现的顺序来绝定层的堆叠顺序。要想设置正常的z-index，就要一直找到它祖先节点，设置祖先的z-index的值大小。

4、IE6/IE7下对display:inline-block的支持性（display:inline/float:left;）

发现好像IE6和IE7不支持display:inline-block，查资料后发现原来只是部分支持。这里分两种情况：

1)当默认为inline元素（如span等）的display属性设置为inline-block时，IE6/IE7浏览器支持；

2)当默认为block元素（如div等）的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

所以，你设置div的display:inline-block，发现无效。解决办法也有多种：

1)

先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）： 

    div {display:inline-block;...} 

    div {display:inline;}

2)直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：

    div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/

    div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

3)设置div的float属性为float；

对了，文章写完竟然忘了黑IE浏览器。IE太烂太烂，建议大家不要用，不要用（黑IE现在成了政治正确）