ie8-9的兼容心得

1. ::before或::after改成:before及:after

2. overflow: hidden是个好习惯

3. translate()调对齐相关时，改用margin-left: -?px，margin-top: -?px

ps: 有时候做动画，元素的终点位置是translate()调的会导致ie9显示错位（ie9不支持transform），这个时候就可以用margin来做动画解决这个问题。

4. border-radius: 用图片吧

5. 众所周知：不要用flex，既然都要兼容ie8了...

6. 使ie8支持html5的标签

<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>

7. 使ie8支持媒体查询

<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

以上两项可以放在一起，并带上hack写法：

<!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

8. forEach不兼容ie8，可以用jquery的$.each()也可以直接用for。

ps: 其实有更好的方法，写段js来兼容，如下：

Array.prototype.forEach =  Array.prototype.forEach || function(callback){
    for(var i = 0;i < this.length;i ++){
        callback(this[i], i, this);
    }
};

9. 牢记，在写完opacity属性时：

filter: alpha(opacity=?);  /* 取值0-100 */

ps: 不过也要灵活使用，像一些hover把opacity变1的动画，ie8本来就不支持transition，所以hover状态就不用写filter属性了（让ie8什么事也不做），只在初始状态写即可。