兼容性项目经验总结

时间 2019-11-16 标签兼容性项目经验总结

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

登陆页占满整个屏幕

将内容部分的底部外边距设为负数(支持全部现代浏览器，以及兼容IE7+)
CSS代码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代码html

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

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

*{
     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>css3

使用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>bash

使用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:;"> </a>；当时这个bug调试了很久，简直要奔溃啊！好在最后仍是找到了解决方案！布局

IE7清除浮动的问题

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

未完待续……