常見兼容性問題總結

2024-04-27 15:15:47

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素同行問題</title> <style type="text/CSS"> .box{width: 400px;} .left{width:100px;height:300px;background: red;float: left;} .right{width: 300px;float: left;} /* 在IE6下元素浮動要并在同一行的元素都要加浮動，否則會產生兼容性問題 */ </style></head><body> <div class="box"> <div class="left"></div> <div class="right"> 練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習練習 </div> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE6下雙邊距問題</title> <style type="text/css"> body{margin: 0;} .wrap{border: 2px solid #000;float: left;} .box{width: 100px;height: 100px;background: red;margin: 0 100px;float: left;display: inline;} /* IE6下的雙邊距BUG 在IE6下，塊元素有浮動和橫向margin的時候，橫向的margin值會被放大成兩倍解決辦法: 給box加上display:inline; */ </style></head><body> <div class="wrap"> <div class="box"></div> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE67下li的4px間隙</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type="text/css"> .list{width: 300px;font-size: 16px;} .list li{border: 1px solid #000;} a{float: left;} span{float: right;} /*清浮動*/ li:after{content: "";display: block;clear: both;} li{zoom:1;} li{vertical-align: top;} /* IE6,7下li的4px的間隙問題在IE6,7下li本身沒有浮動，但是內容浮動了li之間就會多出4px間隙解決辦法：給li加vertical-align：top/middle/bottom */ </style></head><body> <ul class="list"> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> </ul></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片下的空隙</title> <style type="text/css"> .box{border: 1px solid black;background: red;} img{width: 300px;height: 300px;vertical-align:top;} /* 解決辦法：給img加上vertical-align:top; */ </style></head><body> <div class="box"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE6下最小高度問題</title> <style type="text/css"> .box{height: 0;background: black;overflow: hidden;} /* 在IE6下高度小于19px的元素，高度都會被當做19px來處理,加上font-size:0;可以處理至2px 解決辦法：overflow:hidden; 最小只能處理至1px */ </style></head><body> <div class="box"></div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input背景圖片滾動問題</title> <style type="text/css"> input{margin: 0;padding: 0;} .text{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;margin-bottom: 70px;} .box{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;} .text2{width: 300px;height: 40px;border:none;background: 0;} /* IE6下，當內容超出時，背景圖片會滾動解決辦法：把input用一個div包起來，在div中設置樣式，把input大小調的和div一樣大，去掉border和background-color； */ </style></head><body> <input type="text" name="" class="text"> <div class="box"> <input type="text" name="" class="text2"> </div></body></html>

上一篇：安裝Sublime+Emmet插件作為前端開發環境，第一個簡單頁面

下一篇：jQuery Valdation學習