123,123

您當前所在位置：首頁 → 網(wǎng)絡編程 → DIVCSS → CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例

CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例 時間：2015-06-28 00:00:00 來源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評論(0)

我們看看list-style-type在IE與FF中希奇的現(xiàn)象解析，我們看下面的代碼：經(jīng)典論壇原文

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

MB5U

Div CSS布局關(guān)于分辨率與100%自適應問題的探討！

CSS基礎(chǔ)實例：CSS實現(xiàn)帶背景圖片的文字鏈接的方法

DIV CSS實例教程：一款清新風格的CSS新聞列表制作?

CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？

CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局

DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單

DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單

DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果

Example Source Code

　　1、不知道為什么，以下這段代碼的列表樣式（list-style-type:circle;）在 ff 怎么也不顯示，但在 ie 中顯示正常。
　　2、display:block 在 ff 下顯示是正常的，突出顯示部分（background-color: red;}）僅加亮了字體。但在 ie 下卻把整個 li 都突出顯示了。

我們來看問題出在哪里：

　　第一個問題是因為沒有定義list-style-position，所以在FF下面列表預設(shè)標記無法顯示。
　　第二個問題是由于沒有定義A的寬度，塊元素寬度默認為整行，所以把整個li都突出有背景色了。模板無憂-MB5U.-COM
　　我們進行相應的修改。增加了：list-style-position: inside ;屬性。

看下面的運行效果：

Source Code to Run

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

MB5U

Div CSS布局關(guān)于分辨率與100%自適應問題的探討！

CSS基礎(chǔ)實例：CSS實現(xiàn)帶背景圖片的文字鏈接的方法

DIV CSS實例教程：一款清新風格的CSS新聞列表制作?

CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？

CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局

DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單

DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單

DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果

　　我們在IE中瀏覽沒有什么問題了，但在FF中我們發(fā)現(xiàn)。鏈接文字消失了，我們將A元素不設(shè)置為塊元素，此問題消失。原因未解：

Source Code to Run

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

MB5U

Div CSS布局關(guān)于分辨率與100%自適應問題的探討！

CSS基礎(chǔ)實例：CSS實現(xiàn)帶背景圖片的文字鏈接的方法

DIV CSS實例教程：一款清新風格的CSS新聞列表制作?

CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？

CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局

DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單

DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單

DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果

關(guān)鍵詞標簽：實例,解析,布局,現(xiàn)象,

相關(guān)閱讀

文章評論

查看所有0條評論>>