兼容性项目经验总结

·  阅读 316

作为一名不太合格的前端开发人员,惊闻项目要兼容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

未完待续……

分类:
前端