3像素問(wèn)題及解決辦法

當(dāng)使用float浮動(dòng)容器后，在IE6下會(huì)產(chǎn)生3px的空隙，有意思的是右側(cè)容器沒(méi)設(shè)置高度時(shí)3px在右側(cè)容器內(nèi)部，當(dāng)設(shè)定高度后又跑到容器的左側(cè)了，所以對(duì)布局精度要求高。

當(dāng)子元素浮動(dòng)且未知高度時(shí)，怎么使父容器適應(yīng)子元素的高度？

這種情況可在父窗口加上 overflow:auto;zoom:1;這兩個(gè)樣式屬性，overflow:auto;是讓父容器來(lái)自適應(yīng)內(nèi)部容器的高度，zoom:1;是為了兼容 IE6而使用的CSS HACK。zoom:1;通不過(guò)W3C的驗(yàn)證，這也是遺憾的一點(diǎn)，幸好IE支持<!–[if IE]>這種寫(xiě)法，可以專門(mén)針對(duì)IE來(lái)寫(xiě)單獨(dú)的樣式，所以可以把這個(gè)屬性寫(xiě)在頁(yè)面內(nèi)的<!–[if IE]>中，這樣應(yīng)該可以通過(guò)驗(yàn)證了。

IE6雙倍邊距bug

當(dāng)頁(yè)面內(nèi)有多個(gè)連續(xù)浮動(dòng)時(shí)，如本頁(yè)的圖標(biāo)列表是采用左浮動(dòng)，此時(shí)設(shè)置li的左側(cè)margin值時(shí)，在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設(shè)置為10px， 而左側(cè)則呈現(xiàn)出20px，解決它的方法是在浮動(dòng)元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug。

超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)的問(wèn)題

被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過(guò)這個(gè)問(wèn)題，解決方法是改變CSS屬性的排列順序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

IE6下這兩個(gè)層中間怎么有間隙
這個(gè)IE的3PX BUG也是經(jīng)常出現(xiàn)的，解決的辦法是給.right也同樣浮動(dòng) float:left 或者相對(duì)IE6定義.left margin-right:-3px;

IE6文字溢出BUG
說(shuō)明：注釋造成文字溢出是IE的BUG。

一個(gè)空格引發(fā)CSS失效
這段代碼對(duì)<p>的首字符樣式定義在IE6上看是沒(méi)有效果的（IE7沒(méi)測(cè)試），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說(shuō)，p:first- letter{font-size:300%}的寫(xiě)法是沒(méi)錯(cuò)的。那么問(wèn)題出在哪里呢？答案是偽類(lèi)中的連字符”-”。IE有個(gè)BUG，在處理偽類(lèi)時(shí)，如果偽 類(lèi)的名稱中帶有連字符”-”，偽類(lèi)名稱后面就得跟一個(gè)空格，不然樣式的定義就無(wú)效。而在FF中，加不加空格都可以正常處理。

IE6中奇數(shù)寬高的BUG
IE6還有奇數(shù)寬高的bug，解決方案就是將外部相對(duì)定位的div寬度改成偶數(shù)。

IE6下為什么圖片下方有空隙產(chǎn)生
解決這個(gè)BUG的方法也有很多，可以是改變html的排版，或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle |text-bottom
還可以設(shè)置父容器的字體大小為零，font-size:0

ie6下空標(biāo)簽高度問(wèn)題
一個(gè)空div如果高度設(shè)置為0到19px，IE6下高度默認(rèn)始終19PX。
例如：
.c{background-color:#f00;height:0px;/*給定任何小于20px的高度 */}
<div class=”c”></div>

如果不讓它默認(rèn)為19PX。而是0PX的話
解決方法有3種：
1.css里面加上overflow:hidden;
2.div里面加上注釋,
<div class=”c”><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class=”c”>&nbsp;</div>(#換成&)

修正重復(fù)文字bug

復(fù)雜的布局可以觸發(fā)在浮動(dòng)元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法，有些是完美的，但是做一些反復(fù)試驗(yàn)也是必須的：

確保所有的元素使用”display:inline;”
在最后一個(gè)元素上使用一個(gè)”margin-right:-3px;”
# 為浮動(dòng)元素的最后一個(gè)條目使用一個(gè)條件注釋，比如：
<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一個(gè)空的div(它也有必要設(shè)置寬度為90%或類(lèi)似寬度。)