CSS Hack写法与IE6下的常见Bug

    总结一下本人在IE6、IE7下使用的CSS Hack写法，以防哪天又遇到需要兼容IE6、7的任务。

一 CSS Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致同样的CSS在不同浏览器的环境中呈现出不一致的页面展现效果。

这时为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，把针对不同的浏览器/不同版本写相应的CSS代码的过程，叫做CSS Hack

CSS Hack的方式主要有如下三种
(引用自：http://blog.youkuaiyun.com/freshlover/article/details/12132801)

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线”_“和星号” * “，IE7能识别星号” * “和加号”+“，但不能识别下划线”_”，IE6~IE9都认识”\9“，但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

上图引用自：http://www.duitang.com/static/csshack.html

根据这张图先给出结论：

IE6识别 * 、_ 、\9
IE7识别 * 、+、\9
IE8识别 \9、\0
上述几种符号在FireFox上、Chrome都不识别
（IE各版本在标准和怪异模式下可识别的前缀词请参考：http://blog.youkuaiyun.com/freshlover/article/details/12132801）

第一和第二种CSS Hack方式都可以使用此结论。

下面我们用例子说明

<style>
/*选择器前缀法*/
#cshk{ height:20px; }//所有浏览器都识别
*html #cshk {height:50px; }//仅IE6识别
*+html #cshk {height:80px; }//仅IE7识别

/*属性前缀法*/
#color{
    /*书写顺序为所有浏览器的样式在最前，其次是IE8、IE7，最后是IE6。     
*/
      color:red;//所有浏览器都识别
      color:blue\9;//IE9及以下均识别
      color:blue\0;//仅IE8识别
      +color:orange;//仅IE7识别
      _color:green;//仅IE6识别
 }
</style>

二 IE6下的Bug

inline-block

IE6/IE7下对display:inline-block的支持性不好。
1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；
2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

IE6下块元素如何实现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;} /*推荐IE6*/
div { display:inline-block; *zoom:1;*display:inline;} /*推荐:IE6、7*/

引用自：http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html

margin双倍bug

注意: 该bug只会出现在IE6上。

出现这个bug需要具备三个条件：
    1、浏览器为IE6，大于IE6的ie系列版本和火狐等其他浏览器不会出现这个情况。
    2、对象设置了float属性，如.ILeft { float: left;}
    3、对象设置了margin属性，如.ILeft { float: left; width: 150px; margin-left: 15px}

以上的class=ILeft的层在IE6下浏览就会出现左边距为30px的情况，而不是正常想象中的15px。

解决办法是
给对象的css属性加上 display:inline 即可解决该bug
代码：.ILeft { float: left; width: 150px; margin-left: 15px; display:inline}

再次刷新网页，在IE6下的margin双倍的bug就消失了

参考文档

http://blog.youkuaiyun.com/freshlover/article/details/12132801
http://www.duitang.com/static/csshack.html