欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

兼容性项目经验总结

程序员文章站 2022-07-03 15:37:16
...

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