关于兼容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 的效果了
--flex 布局兼容多版本，包括到IE10
.dis-box{
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.flex-1{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-2 {
-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2; /* OLD - Firefox 19- */
-webkit-flex: 2; /* Chrome */
-ms-flex: 2; /* IE 10 */
flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
--浏览器自动切换至IE的最高版本
在html的title标签下面写上下面这句，页面就会通知浏览器使用IE的最高版本号
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
--解决多行文字溢出显示省略号
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
