多瀏覽器下IE6 IE7 firefox li 間距問(wèn)題第2/2頁(yè)
更新時(shí)間:2007年11月16日 20:49:42 作者:
測(cè)試二,定義css為如下代碼:
復(fù)制代碼 代碼如下:
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;}
ul li a{color:#fff;padding:0 0 0 10px;}
和測(cè)試一相比,只是將width:120px;從ul的定義放置到li的定義,解決了IE5和IE5.5左邊產(chǎn)生空白的問(wèn)題,而IE5的li之間的間距還是有,如下圖:

測(cè)試三,定義css為如下代碼,(最佳寫(xiě)法)
復(fù)制代碼 代碼如下:
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
ul li a{color:#fff;padding:0 0 0 10px;}
和測(cè)試二比較,在li的定義中加上vertical-align: bottom;ie5下正常,li之間的空白行距消失了,取得各個(gè)瀏覽器的效果一樣,如下圖:

總結(jié)
1.解決li在IE5下產(chǎn)生空白行距的方法:如果li定義了寬度,那么需要在li里面再定義vertical-align: bottom。
2.寬度最好不要定義在UL,定義在LI或者UL外層的DIV里面。
3.書(shū)寫(xiě)LI的最佳方式,li里面要書(shū)寫(xiě)高度和寬度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一層div,并定義寬度,那么在li里面不用定義寬度和vertical-align: bottom;,也顯示正常(IE5下不會(huì)產(chǎn)生空白行距),不過(guò)高度還是要定義一下的。
相關(guān)文章
關(guān)于td的height和line-height兼容問(wèn)題
寫(xiě)頁(yè)面的時(shí)候,遇到處理數(shù)據(jù)的時(shí)候還是要用TABLE的,但是有的時(shí)候顯示出來(lái)table, ie和ff的高不同。2008-04-04CSS對(duì)Web頁(yè)面載入效率的影響分析總結(jié)
我們都熟知JavaScript可能會(huì)對(duì)Web頁(yè)面的加載與顯示產(chǎn)生較大的影響,因此我們常常關(guān)注JavaScript是不是會(huì)占用客戶端較多的資源,然而大部分都會(huì)忽略的一件有趣的事情,CSS也會(huì)對(duì)Web頁(yè)面載入的效率產(chǎn)生影響。2008-05-05css創(chuàng)意ul+li實(shí)現(xiàn)的細(xì)線表格實(shí)現(xiàn)代碼
非常用創(chuàng)意的用ul+li實(shí)現(xiàn)的細(xì)線表格效果,不用table2008-08-08xhtml+css網(wǎng)頁(yè)制作中常見(jiàn)問(wèn)題解決方法
xhtml+css頁(yè)面制作過(guò)程中問(wèn)題的解決方案,說(shuō)是解決方案應(yīng)該有點(diǎn)過(guò)了,充其量只不過(guò)是給剛剛開(kāi)始學(xué)標(biāo)準(zhǔn)頁(yè)面制作的朋友們的一些小建議,如果講得不對(duì)的地方請(qǐng)多多包涵,當(dāng)然也可以提出你們更好的方法,大家相互學(xué)習(xí)交流,共同成長(zhǎng)!2008-10-10關(guān)于《精通css》之幾個(gè)不錯(cuò)的注意事項(xiàng)
這篇文章主要介紹了關(guān)于《精通css》之幾個(gè)不錯(cuò)的注意事項(xiàng),需要的朋友可以參考下2007-03-03