關於那些常見的坑爹的小bug（會持續更新）

    當我學了矩陣分析的時候我知道什麼是麻煩，當我學了傅里葉級數的時候我知道什麼是相當麻煩。然而，當我剛剛接觸前端，我才明白什麼叫做坑爹的ie6。這個分享對於經驗豐富的前端基本都遇過。對於剛入行的新手，或許可以起到一點點的指導作用。不求救萬人於水火，但求某日能幫到路過的你。   

    在說bug之前，先看看各大瀏覽器最近的份額

有這個百度的瀏覽器份額可以看出ie6的末日漸行漸近了。

但是中國盜版的xp系統用戶還不在少數，所以ie6在短期內不會消失。下面就說一下以ie6爲首的一些奇葩而又常見的bug。

1、IE6.0 Bug---雙倍邊距(margin)的bug

這個不用多說，入門和沒入門的區別就在於有沒有聽說這個bug了。

解決方法：

加一句：display:inline;就ok.

2、ie6在以下情況下將會引起文字溢出bug

出現的前提：

一個容器包含2兩個具有“float”樣式的子容器。

第二個容器的寬度大於父容器的寬度，或者父容器寬度減去第二個容器寬度的值小於3

在第二個容器前存在註釋（這也是爲什麼此bug也叫做“IE6註釋bug”的原因）。

解決方法：

1.去掉註釋。

2.講--改成————

3、ie下圖片空隙BUG

出現的前提：

有2個img或者同時用的時候，就會出現。

解決方法：

1.img加vertical-align:top;

2.設置圖片的浮動屬性，例如img加float:left;

4、解決IE6不支持position:fixed的bug

解決方法：

/* 除IE6瀏覽器的通用方法 */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}防抖動
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
.ie6fixed3 { /* IE6瀏覽器的特有方法 */
/* IE6瀏覽器的特有方法 */ * html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop))} * html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

5.定義不了高度爲1px的容器

IE6下的默認的行高造成這個bug, 
解決方法很多， 
例如:overflow:hidden 或者zoom:0.08 或者 line-height:1px。

6.超鏈接訪問過後hover樣式就不出現的問題

被點擊訪問過的超鏈接樣式不再具有hover和active了 
解決方法：
改變CSS屬性的排列順序: L-V-H-A  
   

<style type="text/css"> 
a:link {}  
a:visited {}  
a:hover {}  
a:active {}  
</style>   

今晚就寫這麼多，有空再往裏面加。

雖然很多東西都經常見到，但是如果你不記下來，有一天你遇到了，不一定能想得起如何解決。

所以就算簡單，不忘積累。

順便把demo的網址發一下吧，請在相應的瀏覽器看，例如ie6.

鏈接：http://jsbin.com/hacadukurilo/1/edit

Author: Alone
Antroduction: 高級前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。

博主相關文章推薦：

有趣的前端題目，看了不後悔

移動端前端開發概述

淺談 標籤的語義化

淺談鼠標滾輪事件

不積跬步無以至千里----高度自適應的textarea

sass和less，優秀的前端樣式預處理器

視差滾動的那些事兒