教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

UI培訓(xùn)之ie6兼容性問(wèn)題

更新時(shí)間:2015年12月29日15時(shí)09分 來(lái)源:傳智播客UI培訓(xùn)學(xué)院 瀏覽次數(shù):

在工作中，和上課的過(guò)程中經(jīng)常會(huì)需要通過(guò)ie6瀏覽器來(lái)調(diào)整網(wǎng)頁(yè)的兼容性問(wèn)題，而ie是在網(wǎng)頁(yè)調(diào)試過(guò)程中最為麻煩的，在這里我自己見到的ie6常用的瀏覽器兼容性問(wèn)題總結(jié)如下：
1.1 IE6圖片底側(cè)會(huì)有像素間隙問(wèn)題
在ie6,下一個(gè)圖片插到一個(gè)盒子里面，圖片和盒子完全一樣大，但是圖片總是底下有像素的間距。
解決辦法：在CSS樣式中給img上設(shè)置display:block;屬性，將圖片設(shè)為塊元素下面代碼。
    img{display:block;}
1.2 最小高度19px
在IE6下面，如果想給把元素例如div設(shè)置成19像素以下的高度設(shè)置不了。這是因?yàn)镮E6瀏覽器里面有個(gè)默認(rèn)的高度;
iE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的,解決的技巧也有很多,例如: overflow:hidden  font-size:0; 
1.3 IE6顯示多余字符問(wèn)題
在浮動(dòng)的盒子之間寫注釋，會(huì)產(chǎn)生多余的文字；
<style type="text/css">
.box{width:100px;}
.top,.bottom{float:left;width:100px;}
</style>
<div class="box">
  <div class="top">第一行文字</div>
  <!--下面開始第二行-->
  <div class="bottom">第二行文字</div>
</div>
解決辦法：
1.可以考慮去掉HTML注釋。
2.不設(shè)置浮動(dòng)div的寬度。(如果可以不用加寬度)
1.4 了解ie6盒子會(huì)撐高的特性
內(nèi)容有多大，盒子就撐多大
Overflow:hidden;
1.5 IE6怪異解析之padding與border算入寬高 
原因：未加文檔聲明造成非盒模型解析 
解決方法：加入文檔聲明<!doctype html> 
1.6 IE6在塊元素、左右浮動(dòng)、設(shè)定marin時(shí)造成margin雙倍（雙邊距） 
    解決方法：display:inline 
1.7 左浮元素margin-bottom失效 
解決方法：顯示設(shè)置高度 or 父標(biāo)簽設(shè)置_padding-bottom代替子標(biāo)簽的margin-bottom or 再放個(gè)標(biāo)簽讓父標(biāo)簽浮動(dòng)，子標(biāo)簽 
margin- bottom，即(margin-bottom與float不同時(shí)作用于一個(gè)標(biāo)簽) 
1.8 a 標(biāo)簽中的圖片有邊框
解決辦法：display:block;
1.9 屬性hacker 
前綴
1)ie6(含)以下版本識(shí)別
        語(yǔ)法:  _屬性:值;
2)ie7(含)以下版本識(shí)別
        語(yǔ)法:  +屬性:值;
3） hacker屬性




本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://metathetuscanyresort.com/ui 
0 分享到：
和我們?cè)诰€交談！