常見兼容性問題總結(jié)

2024-04-27 15:15:47

字體：大中小

供稿：網(wǎng)友

<!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下元素浮動(dòng)要并在同一行的元素都要加浮動(dòng)，否則會(huì)產(chǎn)生兼容性問題 */ </style></head><body> <div class="box"> <div class="left"></div> <div class="right"> 練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí)練習(xí) </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下，塊元素有浮動(dòng)和橫向margin的時(shí)候，橫向的margin值會(huì)被放大成兩倍解決辦法: 給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;} /*清浮動(dòng)*/ li:after{content: "";display: block;clear: both;} li{zoom:1;} li{vertical-align: top;} /* IE6,7下li的4px的間隙問題在IE6,7下li本身沒有浮動(dòng)，但是內(nèi)容浮動(dòng)了li之間就會(huì)多出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的元素，高度都會(huì)被當(dāng)做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背景圖片滾動(dòng)問題</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下，當(dāng)內(nèi)容超出時(shí)，背景圖片會(huì)滾動(dòng) 解決辦法：把input用一個(gè)div包起來，在div中設(shè)置樣式，把input大小調(diào)的和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插件作為前端開發(fā)環(huán)境，第一個(gè)簡(jiǎn)單頁面

下一篇：jQuery Valdation學(xué)習(xí)