兼容性项目经验总结

作为一名不太合格的前端开发人员，惊闻项目要兼容IE7，我的内心是绝望的，无奈迫于生计，项目该做还是要做的，毕竟我还是食人间烟火的！具体项目就不谈了，做之前查了好多的资料，结合自己的使用，总结一下，以备不时之需！

登录页占满整个屏幕

1. 将内容部分的底部外边距设为负数(支持所有现代浏览器，以及兼容IE7+)
   CSS代码

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    .container{
        min-height: 100%;
        /*等于footer的高度*/
        margin-bottom: -50px;
    }
    .footer{
        height: 50px;
        background-color: #000;
        color: #fff;
    }复制代码

   HTML代码

   <div class="container">这是内容</div>
<div class="footer">这是尾部</div>

2. 将页脚的顶部外边距设为负数（支持所有现代浏览器，以及兼容IE7+）
   CSS代码

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    .container{
        min-height: 100%;
    }
    .footer{
        height: 50px;
        /*要和高度保持一致*/
        magtin-top:-50px;
        background-color: #000;
        color: #fff;
    }复制代码

   HTML代码
   <div class="container">这是内容</div>
<div class="footer">这是尾部</div>

3. 使用calc()设置内容高度，属于css3属性（支持所有现代浏览器，以及兼容IE9+）
   CSS代码

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    .container{
        min-height: calc(100vh - 50px);
    }
    .footer{
        height: 50px;
        background-color: #000;
        color: #fff;
    }复制代码

   HTML代码
   <div class="container">这是内容</div>
<div class="footer">这是尾部</div>

4. 使用flexbox弹性盒布局（支持所有现代浏览器，以及兼容IE9+）
   CSS代码

    *{
        margin: 0;
        padding: 0;
    }
    html{
        height: 100%;
    }
    body{
        min-height: 100%;
        display:flex;
        flex-direction: column;
    }
    .container{
        flex:1;
    }
    .footer{
        height: 50px;
        background-color: #000;
        color: #fff;
    }复制代码

   HTML代码
   <div class="container">这是内容</div>
<div class="footer">这是尾部</div>
   以上内容将仅供参考，兼容性问题还请慎重!!!

背景小图标实现

对于IE7而言，如果要使用a标签去实现背景小图标，一定要在a标签里面去填充内容，简单的padding-left=20px，是不行的，还需要<a href="javascript:;">&nbsp;</a>；当时这个bug调试了好久，简直要奔溃啊！好在最后还是找到了解决方案！

IE7清除浮动的问题

对于IE7的清除浮动，除去常规的清除浮动，还需要在父级添加width:100%或者overflow: hidden。

未完待续……

转载于:https://juejin.im/post/59c3633af265da066563d9f8