ie下面兼容性問題的一些總結（轉）

1.浮動兼容性

1.1IE6下的雙邊距BUG

在IE6下，塊元素有浮動和橫向margin的時候，最邊上元素的橫向margin值會被放大成兩倍

解決辦法: display:inline;

1.2IE6，7下li的間隙

在IE6，7下li自己沒浮動,可是li內容有浮動的時候，li下邊就會產生4px的間隙

解決辦法: 1.給li加浮動（可是width就變爲由自適應內容，因此還要加寬度）

2.給li加vertical-align:top/middle/bottom;

ps:當li間隙問題，和最小高度問題都在時，只能用給li加浮動方法。

1.3ie67清除浮動須要觸發haslayout才能夠

.clear:after{content:'';display:block;clear:both;}

.clear{zoom:1;}

after僞類： 元素內部末尾添加內容；

:after{content"添加的內容";} IE6，7下不兼容

zoom 縮放 

a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。

b、FF 不支持；

1.4ie6，7下左邊元素浮動，右邊元素經過margin併到一行，會出現3像素bug。

解決方法：經過浮動並在一行

1.5當浮動元素和絕對定位元素是並列關係的時候，在IE6下絕對定位元素會消失

解決辦法:

給定位元素外面包個div

1.6在IE6下的文字溢出BUG

子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素的時候，ie6下文字會溢出

解決辦法:用div把註釋或者內嵌元素用div包起來

<style>
 
 .wrap{ width:300px;}
 
 .left{float:left;}
 
 .right{width:300px;float:right;}
 
 </style>
 
 <div class="wrap">
 
 　　<div class="left"></div>
 
     <div><!-- IE6下的文字溢出BUG --><span></span></div>
 
     <div class="right">范德薩范德薩范德薩</div>
 
 </div>

2.定位問題

2.1ie6下面父級必定會包含住子級，當子級高度比父級高時，子級會把父級高度撐開

解決方法：給父級加overflow：hidden；

問題：當子級有position：relative；時，父級的overflow是包不住子級的relative的。（解決方法：給父級也加一個position；）

2.2position:absolute;寬高奇數問題

在 IE6 下定位元素的父級寬高都爲奇數那麼在 IE6 下定位元素的 right 和 bottom 都有1像素的誤差。

2.3固定定位ie6下不兼容

3.表單問題

3.1在IE6，7下輸入類型的表單控件上下各有1px的間隙

解決辦法:給input加浮動

3.2在IE6，7下輸入類型的表單控件加border:none;

解決辦法: 重置input的背景或者border:0;

3.3當inline-block與text-indent在IE六、7下相遇後

text-indent爲負時，元素向左偏移，text-indent爲正時，元素向右偏移。在這種狀況下，元素的偏移量由text-indent和margin值決定，如：margin-left:-10px; text-indent:10px至關於margin-left:0; text-indent:0元素沒有偏移。

input、select、button、textarea的默認display皆爲inline-block。

解決方法一：ie67，用display：block;

解決方法二：用padding代替text-indent；

3.4ie6下面input背景圖片滾動

解決方法：在外面套一層div，背景圖片寫在div裏面，input背景透明或無。

3.5ie6下面label（radio、checkbox）不加for屬性沒有效果

<label><input type="checkbox" id="man">man</label>

3.6ie6下面textarea默認有滾動條

解決方法：textarea{overflow:auto;}

4.圖片下方間隙問題

a、display:block; (改變標籤自己特性)

b、vertical-align (完美方案)

5.ie6下最小高度問題

Ie6下最小高度小於20px會解析爲20px

解決方法:

height:1px;overflow:hidden;

6.ie6body高度的問題

<div class="wrap">
2      <ul>
3          <li>fdasfd</li>
4          <li>fdsfds</li>
5          <li>fdfds</li>
6      </ul>
7 </div>

1 .wrap{
 2     width:800px; 
 3     height:200px;
 4     margin:200px auto;
 5     border:1px solid red; 
 6     position:relative;
 7     overflow: hidden;
 8 }
 9 .wrap ul{
10     float: left; 
11     position: relative; 
12     left:50%;
13     top:50%; 
14     border:1px solid red; 
15     height:100px; 
16 }
17 .wrap li{
18     float: left; 
19     width:100px; 
20     height:100px; 
21     background:red; 
22     position: relative; 
23     left:-50%;
24     top:-50%; 
25     margin-left:10px; 
26     list-style: none; 
27     _display:inline; /*ie6雙邊距*/
28     *overflow: hidden;/*ie7下面不支持寬度*/
29 }

在上面這個水平垂直居中浮動元素的時候遇到一個問題，就是若是不給ul加高度，那麼li下面的top:-50%失效，爲何？

緣由：一個對象是否可使用百分比顯示，取決於對象的父級對象

怎麼才能支持百分比呢：

通常來講，要知足兩個條件：

其一，父標籤有高度可尋，就是向上遍歷父標籤要找到一個定值高度，若是中途有個height爲auto或是沒有設置height屬性，則高度百分比不起做用；

其二，標籤自己的屬性，若是內聯元素，則須要有浮動，絕對定位，固定定位之類屬性讓他支持寬高；

　　上面li的向上偏移是相對於ul的，而ul沒有高度，因此li就向上偏移不了。

同理，咱們要作一個遮罩層{position:absolute;top:0;left:0;height:100%;width:100%;background:#000;opacity:0.3;filter:alpha(opacity:30);}，須要給該遮罩層設置寬高100%，在ie67下面，雖然遮罩層的offsetParent（定位父級）是html，可是瀏覽器默認狀態 下，是沒有給body一個高度屬性的，所以咱們不給body設置height的話，遮罩層的高度也就不能用，因此當咱們給遮罩層設置height:100%;時，不會產生任何效果，而當咱們給body設置了100% 以後，遮罩層的height:100%便發生做用了。因此咱們須要給ie6下面的body{height：100%；}

7. 1px dotted red;在ie6下不支持，表現的和1px dashed red同樣

　　解決方法：切背景平鋪（就用dashed挺好看的）

8.在IE6下解決margin傳遞要觸發haslayout

　　在IE6下父級有邊框的時候，子元素的margin值消失

　　解決辦法:觸發父級的haslayout：zoom:1;

9.ie6下僞類只支持a標籤

　　注意書寫順序：a:link a:visited a:hover a:active

10.ie6當一行子元素佔有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效

11.透明度opacity，ie8 如下不兼容

　　filter：alpha（opacity：）；

12.ie6下png不支持

　　解決方法：js、濾鏡（_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");）

13.ie67非法嵌套的標籤會被異常處理

　　如：ul>li*4+p

　　在標準瀏覽器下面p標籤和li爲兄弟關係

　　Ie67下：p標籤會被li吃掉，變爲父子關係

14.ie67下面內容高度沒有屏幕高時，也會有滾動條

　　解決方法：overflow:auto;

15.IE6/7:躲貓貓bug

產生條件1：一個浮動元素後面跟着一個非浮動元素，接着是一個清理元素，全部元素都包含在一個有背景色或背景圖片的父元素中。

解決辦法：

1.不要在父容器裏面使用背景或圖片（要必須有背景的話，這個固然這個不是可行的）。

2.給容器指定一個行高。

3.將浮動元素和容器元素的position屬性設置爲relative。

產生條件2：一個撐破了容器的浮動元素，若是在他以後有不浮動的內容，而且有一些定義了:hover的 連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。解決方法：1.在（那個未浮動的）內容以後添加一個<span style=」clear: both;」> </span>2.觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;