細數那些不能直視的IE6BUG

    

    1.  li在IE中底部3像素的BUG 

        解決方案：在<li>上加float:left；便可解決

    2.  IE6中奇數寬高的BUG。

        解決方案：就是將外部相對定位的div寬度改爲偶數。高度也是同樣的。

    3.  IE6文字溢出BUG   

        引起這種BUG有幾個條件

            1.是註釋引發的,刪除全部註釋便可.

            2.hidden的input直接放在form下.

            3.display爲none的div也有可能引起此bug.

            4.能夠經過外面再包一次DIV解決

    由註釋形成文字溢出，屬於IE6的BUG，溢出文字的字數=註釋的條數*2-1，這裏的字數在中文或英文數字時都成立。註釋坐在位置與溢出位置、區塊的浮動以及文字區塊的固定寬度有必然聯繫。

    解決辦法：

    1、不放置註釋。最簡單、最快捷的解決方法；

    2、註釋不要放置於2個浮動的區塊之間；

    3、將文字區塊包含在新的<div></div>之間，如：<div style=」float:right;width:400px」><div>↓這就是多出來的那隻豬</div></div>；

    4、去除文字區塊的固定寬度，與3有類似之處；

    5、在後面加一個<br />或者空格；（不推薦）

    6、使用IE註釋格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>

    7、給盒子加position:relative;屬性

    4. 樣式中文註釋後引起失效。

        知足下面條件就會引發 註釋下面的樣式不起做用：

        1. css有中文註釋

        2. css爲ANSI編碼

        3. html爲utf-8編碼

        解決方法：

        1. 去掉中文註釋，用英文註釋

        2. 統一css 和 html 的編碼

        建議採用第二種解決方法

        ps： css爲uft-8  html 爲ANSI 不會出現失效的狀況。

        5. li在IE中底部空行的BUG。

            IE6中列表的常見問題出如今當某個 li 中的內容是一個 display: block 的錨點(anchor)時。在這種狀況下，列表元素之間的空格將不會被忽略並且一般會顯示成額外的一行夾在每一個 li 之間。一種避免這種豎直方向多餘空白的解決方法是賦予這些錨點 layout。這樣還有一個好處就是可讓整個錨點的矩形區域均可以響應鼠標點擊。

            解決方法：

            1. 在li a 樣式中加入zoom:1；

            2. 在li 樣式中加入display:inline ；

            3. 將<li>標籤寫成一行；

            4. 在li a 樣式中加入width:100%或者一個寬度值；

        6. 父級使用padding後子元素絕對定位的BUG。

        在父層使用position:relative;和padding（固然0值除外）後，ie6中層的定位起始座標是從padding後的位置算起，而其餘則從層的真實位置算起，而非被padding改變後的那個位置。這點形成使用position:absolute進行層定位時ie6與其餘瀏覽器的表現不同。

        解決方法：

        給外層加寬度或zoom:1

        7. display:none引發的3像素的BUG

        解決方案1：

            將最後一個div加一個margin-right:-3px。

        如：<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>

        解決方案2：

        將display: none的div換一個形式隱藏。

        如：<divstyle="position:absolute; visibility: hidden "></div>

        8. IE6的圖片3px問題

            IE 6 中 ，DIV 使用背景圖片（或直接插入圖片在DIV中）的時候，在圖片的下端會出現一條空白間隔，經測量，恰好是 3px .

        解決：

        IE6默認字號是12pt，默認行高是normal。

            1. 給DIV加上：font-size: 0px;

            2. 設置img爲「display:block;」。

            3. 即設置圖片的vertical-align屬性爲「top，text-top，bottom，text-bottom」也能夠解決。

            4.設置圖片的浮動屬性，「#sub img {float:left;}」。

            5.取消圖片標籤和其父對象的最後一個結束標籤之間的空格，這種方法適用範圍比較窄，只限於父對象中只包含一個圖片對象，並且和父對象的結束標籤之間不能有任何空隙。

            9. IE6雙倍浮動BUG

        解決：

            解決辦法是加上display:inline;

            10 .IE6的著名3px BUG（斷頭臺bug）：

            兩個層，一個浮動，一個不浮動，把浮動的一個放在不浮動層中，你會發現兩個之間有點間隙，寬度爲3px。這個問題是最讓人頭疼的問題了。

            解決方法：

                1、全部的層都浮動 把右邊那個層也設置成浮動層就能夠消除這可惡的3px間隔

                2、給左邊的層，應用margin-right:-3px;，一樣可解決IE 3px bug。

            11. Ie6圖片致使行距無效

                解決方法：對和文字相鏈接的img、input、textarea、select、object等元素加以屬性 margin: (所屬line-height-自身高度)/2px 0）

            12. IE6使用濾鏡使PNG圖片透明後，容器內連接失效的問題。

                解決方法是爲連接定義一個相對定位屬性。position:relative

            13. 禁用文本框中文輸入法的通用方法。

            <div>驗證碼<input type="text" style="ime-mode:disabled"/></div>        

              IE能夠用ime-mode:disabled，firefox3也開始支持IE的這一私有屬性