前端IE6 IE7 BUG集錦

相信做前端的童鞋都知道，在整個前端開發過程中，總是ie6問題多多，bug多多，這點也最讓布局者頭疼。在這裡，就之前工作中遇到的問題做了個總結，藉此分享、希望對大家能有所幫助，對於不足之處，還望高手多多指點。

１、浮動元素的雙倍margin

說明：這是ie６及其以下版本的乙個經典的bug，觸發這個bug產生的條件是給元素設定了浮動並且同一方向設定了margin值。來看以下**：

解決方案：改變浮動元素的顯示型別，如.float

2、浮動元素與非浮動元素相鄰時的3畫素bug

說明：這個3畫素bug也是ie6下乙個臭名昭著的bug。乙個大盒子中有兩個小盒子，其中乙個盒子浮動另外乙個不浮動，這時在ie６下中間就會有３畫素的間距。這裡，我們借用問題1中的**：

執行以下**，你會發現兩個盒子中間會有3畫素的間距，其實解決方法很簡單，讓另外乙個盒子也浮動就可以了。

或者可以給左邊的盒子利用ie6的hack來設定_margin-right:-3px; ，以清除間距。

3、浮動與絕對定位混用產生的bug

說明：乙個盒子，裡面包含了2個浮動的盒子和乙個絕對定位的盒子。當設定某些屬性值的時候，絕對定位的盒子會在ie6下消失。這種情況並不是每次用到了就會發生，只是當屬性設定到一定程度時才會發生，具體的我們來看下面**：

執行上而**，你會發現在ie6中使用絕對定位的那個盒子竟然離奇地消失了，這讓很多開必者甚是頭疼。由問題2我們知道，浮動與非浮動元素相鄰時候，會產生3畫素間距，那麼這個絕對定位元素的消失與這3畫素間距有關嗎？（留個疑問，感興趣的可以自己測試哈）

下面我們來看個體的解決方案：

(1)、給父級盒子加上display:inline;

(2)、浮動元素寬度相加+2《父級寬度，此時可以給浮動元素設定_margin-left:-3px;或者_margin-right:-3px;

(3)、給任意浮動元素前面新增乙個空盒子；

(4)、給絕對定位元素外面巢狀乙個盒子；

4、鬼影或者轉殖文字

說明：父元素的內部有多個浮動；最後乙個浮動元素前有隱藏元素（包含注釋與屬性隱藏）；子元素的寬度與父元素相同，或者父元素的寬度減去子元素寬度小於3畫素；

這種現象算是隨機產生的吧、有時候也看個人運氣，所以目前尚無參考例子可尋哦。。。見諒！

解決方案：

1、去掉注釋或者使用條件注釋()；

2、給浮動的子元素加上display:inline;屬性；

5、overflow:auto;與position:relative;的碰撞

這也bug也稱作「距出邊界的bug」，它只出現在ie６、７中。兩個塊元素，父元素設定了overflow:auto; 子元素設定了相對定位，當子元素的高度大於父元素的高度時，ie6、7下會產生乙個很難看的bug，怎麼個難看法，這裡我就不再損他們了，大家還是先來看看**哈：

執行**，大家可以自己測試哈看看差異。^_^

解決方案：給父級元素設定屬性position:relative；

6、li的階梯bug

這是乙個很有意思的bug，存在於ie6、7中，當我們在使用ul li來布局的時候，給li裡面的元素浮動（比如： a），就會出現這種情況；具體我們來看**哈：

不信我說的現象，你可以試試哈。就複製上面**然後執行瞧瞧

…………

……怎麼樣，問題出來了吧？呵呵

遇到這種情況，我想大家也都有自己的解決方法。這裡呢？我個人覺得是給li加浮動比較穩妥，至於a如果要求設定寬高，可以轉化為塊級元素，這個僅是個人見解。這個例項呢，是在乙個論壇中看到的、所以借過來與大家分享一下。

7、li的空白間距

這齣中關於li的乙個bug，存在於ie６/7中。有時候會無端地在li與li間增加乙個垂直間距。不多說，先來看看**吧：

對於**中一些比較寬鬆且設了相近背景色布局，或許你看不出這其中的間距差異問題。那麼，現在我們針對這點來做乙個demo。大家可以複製**看看效果；

對了這種情況，解決方案也是多種的。大家見仁見智吧，，下面我列舉一下自己平時常用的一些處理方法；

1、給a標籤設定寬度（根據實際情況來）；

2、給li新增屬性display:inline;

3、給li設定1畫素的底邊線（顏色與背景色一致）；這種方法一般不推薦使用吧，因為一旦背景色是漸變或者其他情況，他就暴露了。如果再用margin-bottom:-1px;來隱藏這條線，那就走遠路了，何必捨本逐末呢。。。