[兼容]——IE 8 常见兼容性问题

接触了一个PC端网页开发的项目，要求兼容到IE 8,遇到不少坑，在这里记录下：

1、IE8 的兼容性视图

bug描述：IE8有许多新更新，但微软为了兼容以前的IE浏览器，提出了“兼容性视图”的概念，它可以使用低版本IE（6、7）内核，显然这并不是我们想要的，所以需要使用meta标签来强制IE8使用最新的内核渲染页面

bug解决：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2、display：inline-block不支持

bug描述：在IE8 中，使用display: inline-block没有预期效果。

bug解决：

div {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

3、line-height 异常

bug描述：我们经常使用line-height来使单行文本垂直居中，但此方法在IE8 中有异常表现，具体为：一是IE8 不支持此方法，二是当我们使用hack后，元素不能完全垂直居中

bug解决：

div {
    width: 200px;
    height: 40px;
    line-height: 40px;
    line-height: 38px\9;    // IE8 hack方法，有像素偏差
}

4、max-width

bug描述：我常在开发中使用 max-width来限制元素的最大宽度，但有时候并不奏效，慢慢摸索才明白IE解析max-width的规则：严格要求父级元素是固定的。

bug解决：给直接父元素写上 width属性

5、placeholder

详见：【bug】—— IE 8-不支持 placeholder 解决方法

6、background-size: cover

bug描述：如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现

bug解决：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

7、clearfix

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

8、美化input选择文件框

html:

<div class="wrap">
   <img  src="xxx" alt="">
   <input accept="image/jpeg,image/jpg,image/png">
                                       
</div>

.wrap {
    width: 190px;
    min-height: 100px;
    display: inline-block;
    position: relative;
}
.warp img {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.wrap input {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top:0;
    left: 0;
    font-size: 200px; // 解决IE8 - 下input高度撑不开的bug
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}