列表UL、OL預設標記在FF與IE下方式不同的試驗_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
列表UL或是OL中都有一個預設標記，這個標記可能是實點圓點，也可能是數(shù)字。在實際的應用中，我們需要去掉這個預設標記，但我們不清楚這個預設標記是存在于什么位置。因為IE與FF似乎在處理UL的預設標記時都有著不同的方式：我們來寫一個UL的HTML代碼結構：
HTML結構：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
這個UL在不同的瀏覽器中的顯示基本上是差不多的。那么我們設定一下CSS試著看一下IE與FF什么地方不一樣：
CSS代碼：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
現(xiàn)在只把padding的值設為0，這時我們看一下IE中除了多個背景之外并沒有什么變化，但是FF中的預設標記不見了！這里要注重的是IE中的預設標記是在背景外的。我們再來換個方式來設置：
CSS代碼：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
這里我們再看，情況相反，IE的預設標記不見了，而FF中的預設標記還在，這里要注重的是這時FF中的預設標記是在背景里的。當然我們這里有點不理解了，到底這是為什么呢？這個預設標記究竟是在什么地方的呢？下面我們通過一個實例來看一下UL的預設標記是在什么地方的！
HTML結構：
CSS代碼：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
這時我們看到，margin區(qū)域是最外圍的白色部分，往里有點灰色的是border，再往里是更深一點的灰色，這個區(qū)域是padding，最深的區(qū)域是內(nèi)容區(qū)。而預設標記正處在padding的區(qū)域，那么是不是說把padding區(qū)去掉這個預設標記就會消失呢？我們把CSS做一下修改：
CSS代碼：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
我們把padding設為0后發(fā)現(xiàn)預設標記依然還在，不過這時他處在了border的上面，那么我們可以根據(jù)上面推測出預設標記并不存在于margin,padding或是border中，margin,padding與border只不過為預設標記提供了一個存在并顯示的空間。而這個預設標記是浮于margin,padding與border之上的。
那么這時我們大致上可能已經(jīng)理解了，其實IE與FF對于UL的默認值的設定是不一樣的，IE給了UL一個margin值，但是卻沒有給padding值，所以IE中UL的預設標記點是在背景外的。而FF相反給了一個padding值卻沒有給margin值，所以在FF中UL的預設標記點是在背景內(nèi)的。但是依據(jù)上面的實例我們清楚，這個預設標記點不屬于paading也不屬于margin。他只屬于內(nèi)容部分，他一直是在內(nèi)容的外邊緣，當然我們還可以通過CSS來設置其在內(nèi)容的內(nèi)邊緣。基本方式請查閱《CSS2中文手冊》
通過上面的例子我們清楚了，想要讓這個預設標記消失光用margin:0;與padding:0;因為假如出現(xiàn)了border的寬度達到一定的數(shù)值時這個預設標記還是會出現(xiàn)的。所以正確的寫法是：margin:0; padding:0; list-style:none;
雖然預設標記很不錯，但是卻沒辦法精確控制，所以在實際應用中并不推薦使用，還是用背景圖來代替！
本文作者：小毅
HTML結構：
示例代碼 [www.wf0088.com]
<ul>
<li>建設部通報八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網(wǎng)絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>
<li>建設部通報八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網(wǎng)絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>
查看運行效果：
代碼調(diào)試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
這個UL在不同的瀏覽器中的顯示基本上是差不多的。那么我們設定一下CSS試著看一下IE與FF什么地方不一樣：
CSS代碼：
示例代碼 [www.wf0088.com]
ul {background:#ddd; padding:0; }
查看運行效果：
代碼調(diào)試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
現(xiàn)在只把padding的值設為0，這時我們看一下IE中除了多個背景之外并沒有什么變化，但是FF中的預設標記不見了！這里要注重的是IE中的預設標記是在背景外的。我們再來換個方式來設置：
CSS代碼：
示例代碼 [www.wf0088.com]
ul {background:#ddd; margin:0; }
查看運行效果：
代碼調(diào)試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
這里我們再看，情況相反，IE的預設標記不見了，而FF中的預設標記還在，這里要注重的是這時FF中的預設標記是在背景里的。當然我們這里有點不理解了，到底這是為什么呢？這個預設標記究竟是在什么地方的呢？下面我們通過一個實例來看一下UL的預設標記是在什么地方的！
HTML結構：
示例代碼 [www.wf0088.com]
<ul>
<li>建設部通報八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網(wǎng)絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>
<li>建設部通報八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網(wǎng)絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>
CSS代碼：
示例代碼 [www.wf0088.com]
ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }
li {background:#aaa;}
li {background:#aaa;}
查看運行效果：
代碼調(diào)試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
這時我們看到，margin區(qū)域是最外圍的白色部分，往里有點灰色的是border，再往里是更深一點的灰色，這個區(qū)域是padding，最深的區(qū)域是內(nèi)容區(qū)。而預設標記正處在padding的區(qū)域，那么是不是說把padding區(qū)去掉這個預設標記就會消失呢？我們把CSS做一下修改：
CSS代碼：
示例代碼 [www.wf0088.com]
ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }
li {background:#aaa;}
li {background:#aaa;}
查看運行效果：
代碼調(diào)試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
我們把padding設為0后發(fā)現(xiàn)預設標記依然還在，不過這時他處在了border的上面，那么我們可以根據(jù)上面推測出預設標記并不存在于margin,padding或是border中，margin,padding與border只不過為預設標記提供了一個存在并顯示的空間。而這個預設標記是浮于margin,padding與border之上的。
那么這時我們大致上可能已經(jīng)理解了，其實IE與FF對于UL的默認值的設定是不一樣的，IE給了UL一個margin值，但是卻沒有給padding值，所以IE中UL的預設標記點是在背景外的。而FF相反給了一個padding值卻沒有給margin值，所以在FF中UL的預設標記點是在背景內(nèi)的。但是依據(jù)上面的實例我們清楚，這個預設標記點不屬于paading也不屬于margin。他只屬于內(nèi)容部分，他一直是在內(nèi)容的外邊緣，當然我們還可以通過CSS來設置其在內(nèi)容的內(nèi)邊緣。基本方式請查閱《CSS2中文手冊》
通過上面的例子我們清楚了，想要讓這個預設標記消失光用margin:0;與padding:0;因為假如出現(xiàn)了border的寬度達到一定的數(shù)值時這個預設標記還是會出現(xiàn)的。所以正確的寫法是：margin:0; padding:0; list-style:none;
雖然預設標記很不錯，但是卻沒辦法精確控制，所以在實際應用中并不推薦使用，還是用背景圖來代替！
本文作者：小毅
相關CSS教程：
- 相關鏈接：
- 教程說明：
CSS教程-列表UL、OL預設標記在FF與IE下方式不同的試驗
。