IT貓撲網(wǎng)：您身邊最放心的安全下載站！ 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置： 首頁 → 網(wǎng)絡(luò)編程 → 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





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

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

  3. DIV CSS實例教程：一款清新風(fēng)格的CSS新聞列表制作?

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

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

  6. DIV CSS實例教程：蔚藍(lán)色的海?� 漂亮的CSS縱向菜單

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

  8. DIV CSS橫向菜單實例：簡單的思路 陷下的風(fēng)?� 不錯的效?�





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

我們來看問題出在哪里?�

　　第一個問題是因為沒有定義list-style-position，所以在FF下面列表預(yù)設(shè)標(biāo)記無法顯示?�
　　第二個問題是由于沒有定義A的寬度，塊元素寬度默認(rèn)為整行，所以把整個li都突出有背景色了?� 模板無憂-MB5U.-COM
　　我們進(jìn)行相應(yīng)的修改。增加了：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





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

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

  3. DIV CSS實例教程：一款清新風(fēng)格的CSS新聞列表制作?

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

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

  6. DIV CSS實例教程：蔚藍(lán)色的海?� 漂亮的CSS縱向菜單

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

  8. DIV CSS橫向菜單實例：簡單的思路 陷下的風(fēng)?� 不錯的效?�





　　我們在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





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

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

  3. DIV CSS實例教程：一款清新風(fēng)格的CSS新聞列表制作?

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

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

  6. DIV CSS實例教程：蔚藍(lán)色的海?� 漂亮的CSS縱向菜單

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

  8. DIV CSS橫向菜單實例：簡單的思路 陷下的風(fēng)?� 不錯的效?�




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

相關(guān)閱讀

文章評論
發(fā)表評論

熱門文章 DIV+CSS網(wǎng)頁布局常用的一些基礎(chǔ)知識整理 DIV+CSS網(wǎng)頁布局常用的一些基礎(chǔ)知識整理 完美解決CSS網(wǎng)頁水平居中 完美解決CSS網(wǎng)頁水平居中 XHTML+CSS兼容解決方案 XHTML+CSS兼容解決方案 CSS網(wǎng)頁布局困擾新手的八個問題 CSS網(wǎng)頁布局困擾新手的八個問?�

相關(guān)下載

    人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法 CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例 CSS實例:通過定義漸變邊框給圖片加陰影 CSS常用技巧之一 禁止文字自動換行 網(wǎng)頁頁面設(shè)計中CSS十大注意 解決用CSS控制DIV居中失效的問?� css div設(shè)置float后高度不能自動增?� 讓CSS兼容IE和Firefox的技巧集?�