ul在Firefox和IE下的不同表現(xiàn)的解決方法
更新時(shí)間:2007年08月14日 09:53:40 作者:
最近做了個(gè)oblog的系統(tǒng)模板,其中涉及到了ul,所以就整理出了這篇文章+這張大圖。
ul是一個(gè)很常用的標(biāo)簽,但是因?yàn)樗贔irefox和IE下的不同表現(xiàn),讓人覺得它是個(gè)很難以控制的標(biāo)簽。
ul在Firefox下有個(gè)padding值, 卻沒有margin值;而在IE下正好相反,ul有個(gè)margin值, 卻沒有padding值?!鞠聢D中的第二第三例的對照可以看出】
在Firefox下,ul的list-style默認(rèn)是處于內(nèi)容的外邊緣的。當(dāng)然可以通過css可以將list-style置為內(nèi)容的內(nèi)邊緣。
通過權(quán)衡得到適合兩個(gè)瀏覽器的設(shè)置:padding:0; margin:0; list-style:inside;。還可以將ul設(shè)置為padding:0; margin:0; list-style:none;,然后給li添加背景圖片,也是很不錯(cuò)的選擇。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
ul是一個(gè)很常用的標(biāo)簽,但是因?yàn)樗贔irefox和IE下的不同表現(xiàn),讓人覺得它是個(gè)很難以控制的標(biāo)簽。
ul在Firefox下有個(gè)padding值, 卻沒有margin值;而在IE下正好相反,ul有個(gè)margin值, 卻沒有padding值?!鞠聢D中的第二第三例的對照可以看出】
在Firefox下,ul的list-style默認(rèn)是處于內(nèi)容的外邊緣的。當(dāng)然可以通過css可以將list-style置為內(nèi)容的內(nèi)邊緣。
通過權(quán)衡得到適合兩個(gè)瀏覽器的設(shè)置:padding:0; margin:0; list-style:inside;。還可以將ul設(shè)置為padding:0; margin:0; list-style:none;,然后給li添加背景圖片,也是很不錯(cuò)的選擇。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章
position:relative/absolute無法沖破的等級
position:relative/absolute無法沖破的等級...2007-03-03不通過JavaScript實(shí)現(xiàn)的自動(dòng)滾動(dòng)視差效果
這篇文章介紹了一種通過CSS3實(shí)現(xiàn)的視差(Parallax)效果,這個(gè)效果通過在一個(gè)元素上疊加多個(gè)背景圖片,并使用-webkit- transition-屬性來實(shí)現(xiàn)。2009-04-04網(wǎng)頁設(shè)計(jì)者需要了解的_網(wǎng)頁字體大小數(shù)據(jù)參考
對于頁面來說,字體的大小設(shè)置是比較重要的,網(wǎng)上搜集了一些關(guān)于網(wǎng)頁中字體大小的數(shù)據(jù)對比,在這共享出來給大家一起看看,希望對大家在頁面制作過程中有所幫助!2008-10-10使用display:none時(shí)隱藏DOM元素?zé)o法獲取實(shí)際寬高的解決方法
這篇文章主要介紹了使用display:none時(shí)隱藏DOM元素?zé)o法獲取實(shí)際寬高的解決方法的相關(guān)資料,需要的朋友可以參考下2022-07-07絕對定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法
絕對定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法...2007-02-02用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼
用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼...2007-12-12