兼容性項目經驗總結

時間 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>
以上內容將僅供參考，兼容性問題還請慎重!!!