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

全國咨詢/投訴熱線：400-618-4000

UI培訓之ie6兼容性問題

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

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




本文版權歸傳智播客UI培訓學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://oisangadgets.com/ui 
0 分享到：
和我們在線交談！