关于兼容IE的一些策略

--css 盒子模型下的 box-sizing 属性，只兼容到ie8；

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

--ie10及以下的img会有默认的黑色边框
解决：在指定img设置边框属性 border-style:none\9;

--ie6双边距bug: 当一个元素使用浮动时，且其同时设置了外边距margin并其边距的方向与浮动的方向一致时，这个时候在ie6下，就会出现这个双边距bug，即边距是实际设置的2倍；

解决方案：很简单，在该元素的css类里面写上 display:inline;

（原因是，css float属性浮动的元素，不管他们之前是什么，会被变成 block 属性，而ie6不知为何，在渲染float 及 元素为block的时候会让其边距翻倍，因此，我们只管将其属性再次改回 inline 即可）

--ie8及以下不支持border-radius

解决方案：在这里，我们可以引入PIE.htc  (http://www.zhangxinxu.com/study/js/pie.htc 参考张鑫旭博客)

这种方案是有局限性的：

1.定位问题

为目标元素设置position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。

2. 相当路径的问题
IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。因此我们在写路径的时候要写成绝对路径；

3. 缩写的问题
不支持border-top-left-radius这种写法

4. 提供正确的Content-Type
要想让IE浏览器支持htc文件，需要一个有着”text/x-component” 字样的content-type 头部，否则，会忽视behavior。（这一步感觉不是特别需要，我个人在ie8尝试了下没有加这个字样照样可以使用）；

给个例子：

将以上的pie.htc保存至css目录下；然后在css对应的类里面写上

behavior:url(/dedecms/templets/default/style/pie.htc);/*绝对路径*/

ie6以上 各个版本的兼容 hack 技术

针对ie 的hack 其实有好多个符号，但是，全部记住这个我个人觉得没多大必要，反而会更乱；我列举了一下4种符号，记住一下4种符号就好了，然后按需求组合一下就可以实现了；

_ ：选择IE6及以下。

* ：选择IE7及以下。

\9：选择IE6及以上

\0：选择IE8及以上

最后再来说说css 的 一个概念 ：haslayout

haslayout是IE渲染引擎的一个内部组成部分，IE使用布局概念来控制元素的尺寸和定位,在理想情况下，所有元素都控制自己的尺寸和定位；IE开发团队将“布局”用于实际需要的元素上，从而减少性能开销；拥有布局的元素负责本身及其子元素的尺寸和定位。没有布局的元素，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

它能用来干嘛，在这里，别的我不说了，我就举2个比较经典的例子。

1、清除浮动

clearfix{

　　*zoom:1

}

clearfix:after{

　　content:"";

　　display:table;

　　clear:both;

}

大家有没有发现，*zoom:1;

这个到底是什么原理？这是因为ie6/7不支持伪元素，用:after{}无效，故在ie6/7时又加了个hack，zoom:1;

这个zoom，重点是能起到触发haslayout属性，从而修复高度塌陷的问题；

2、display:inline-block 在ie6/7 不支持

按照对haslayout的理解，我们可以通过在ie6/7 的时候做些特殊的处理

解决方案：

在对应的css类里面添加 “*display:inline; *zoom:1”;

原理就是在ie6/7下为inline元素添加zoom:1,让它触发haslayout,从而有了自己的布局，可以计算自己的框高；于是就达到了类似 display:inline-block 的效果了