Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同

作者：佚名 2010-08-18 13:23:36

列表UL或是OL中都有一個(gè)預(yù)設(shè)標(biāo)記，這個(gè)標(biāo)記可能是實(shí)點(diǎn)圓點(diǎn)，也可能是數(shù)字。在實(shí)際的應(yīng)用中，IE與Firefox會(huì)有所不同。

列表UL或是OL中都有一個(gè)預(yù)設(shè)標(biāo)記，這個(gè)標(biāo)記可能是實(shí)點(diǎn)圓點(diǎn)，也可能是數(shù)字。在實(shí)際的應(yīng)用中，我們需要去掉這個(gè)預(yù)設(shè)標(biāo)記，但我們不清楚這個(gè)預(yù)設(shè)標(biāo)記是存在于什么位置。因?yàn)镮E與Firefox似乎在處理UL的預(yù)設(shè)標(biāo)記時(shí)都有著不同的方式：我們來寫一個(gè)UL的HTML代碼結(jié)構(gòu)：

51CTO推薦閱讀：Firefox和IE之間7個(gè)JavaScript差異

HTML結(jié)構(gòu)：

<ul>   
<li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
<li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
<li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
<li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>

運(yùn)行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同</title> 
</head> 
<body> 
<ul>   
 <li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
 <li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
 <li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
 <li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
 <li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>   
</body> 
</html>

這個(gè)UL在不同的瀏覽器中的顯示基本上是差不多的。那么我們?cè)O(shè)定一下CSS試著看一下IE與Firefox什么地方不一樣：

CSS代碼：

ul {background:#ddd; padding:0; }

運(yùn)行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同</title> 
 <style type="text/css"> 
 /*<![CDATA[*/  
  ul {background:#ddd; padding:0; }   
 /*]]>*/  
 </style> 
</head> 
<body> 
<ul>   
 <li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
 <li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
 <li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
 <li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
 <li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>   
</body> 
</html>

現(xiàn)在只把padding的值設(shè)為0，這時(shí)我們看一下IE中除了多個(gè)背景之外并沒有什么變化，但是FF中的預(yù)設(shè)標(biāo)記不見了！這里要注意的是IE中的預(yù)設(shè)標(biāo)記是在背景外的。我們?cè)賮頁Q個(gè)方式來設(shè)置：

CSS代碼：

ul {background:#ddd; margin:0; }

運(yùn)行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同</title> 
 <style type="text/css"> 
 /*<![CDATA[*/  
  ul {background:#ddd; margin:0; }   
 /*]]>*/  
 </style> 
</head> 
<body> 
<ul>   
 <li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
 <li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
 <li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
 <li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
 <li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>   
</body> 
</html>

這里我們?cè)倏矗闆r相反，IE的預(yù)設(shè)標(biāo)記不見了，而FF中的預(yù)設(shè)標(biāo)記還在，這里要注意的是這時(shí)Firefox中的預(yù)設(shè)標(biāo)記是在背景里的。當(dāng)然我們這里有點(diǎn)不理解了，到底這是為什么呢？這個(gè)預(yù)設(shè)標(biāo)記究竟是在什么地方的呢？下面我們通過一個(gè)實(shí)例來看一下UL的預(yù)設(shè)標(biāo)記是在什么地方的！

HTML結(jié)構(gòu)：

<ul>   
<li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
<li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
<li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
<li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
<li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>

CSS代碼：

ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }   
li {background:#aaa;}

運(yùn)行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同</title> 
 <style type="text/css"> 
 /*<![CDATA[*/  
  ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }   
  li {background:#aaa;}  
 /*]]>*/  
 </style> 
</head> 
<body> 
<ul>   
 <li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
 <li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
 <li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
 <li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
 <li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>   
</body> 
</html>

這時(shí)我們看到，margin區(qū)域是最外圍的白色部分，往里有點(diǎn)灰色的是border，再往里是更深一點(diǎn)的灰色，這個(gè)區(qū)域是padding，最深的區(qū)域是內(nèi)容區(qū)。而預(yù)設(shè)標(biāo)記正處在padding的區(qū)域，那么是不是說把padding區(qū)去掉這個(gè)預(yù)設(shè)標(biāo)記就會(huì)消失呢？我們把CSS做一下修改：

CSS代碼：

ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }   
li {background:#aaa;}

運(yùn)行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>Firefox與IE下UL預(yù)設(shè)標(biāo)記的異同</title> 
 <style type="text/css"> 
 /*<![CDATA[*/  
  ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }   
  li {background:#aaa;}   
 /*]]>*/  
 </style> 
</head> 
<body> 
<ul>   
 <li>建設(shè)部通報(bào)八起房地產(chǎn)交易違法、違規(guī)典型案例 </li>   
 <li>周小川表態(tài)引發(fā)美元震蕩|人民幣應(yīng)成世界貨幣?</li>   
 <li>首都機(jī)場(chǎng)一香港乘客制造炸彈威脅導(dǎo)致航班延誤</li>   
 <li>美國(guó)房市“麻煩”未了|底特律房子比車子便宜</li>   
 <li>網(wǎng)絡(luò)報(bào)告:美國(guó)是黑客大本營(yíng) 中國(guó)是最大受害國(guó)</li>   
</ul>   
</body> 
</html>

我們把padding設(shè)為0后發(fā)現(xiàn)預(yù)設(shè)標(biāo)記依然還在，不過這時(shí)他處在了border的上面，那么我們可以根據(jù)上面推測(cè)出預(yù)設(shè)標(biāo)記并不存在于margin,padding或是border中，margin,padding與border只不過為預(yù)設(shè)標(biāo)記提供了一個(gè)存在并顯示的空間。而這個(gè)預(yù)設(shè)標(biāo)記是浮于margin,padding與border之上的。

那么這時(shí)我們大致上可能已經(jīng)理解了，其實(shí)IE與Firefox對(duì)于UL的默認(rèn)值的設(shè)定是不一樣的，IE給了UL一個(gè)margin值，但是卻沒有給padding值，所以IE中UL的預(yù)設(shè)標(biāo)記點(diǎn)是在背景外的。而FF相反給了一個(gè)padding值卻沒有給margin值，所以在Firefox中UL的預(yù)設(shè)標(biāo)記點(diǎn)是在背景內(nèi)的。但是依據(jù)上面的實(shí)例我們清楚，這個(gè)預(yù)設(shè)標(biāo)記點(diǎn)不屬于paading也不屬于margin。他只屬于內(nèi)容部分，他一直是在內(nèi)容的外邊緣，當(dāng)然我們還可以通過CSS來設(shè)置其在內(nèi)容的內(nèi)邊緣。

通過上面的例子我們清楚了，想要讓這個(gè)預(yù)設(shè)標(biāo)記消失光用margin:0;與padding:0;因?yàn)槿绻霈F(xiàn)了border的寬度達(dá)到一定的數(shù)值時(shí)這個(gè)預(yù)設(shè)標(biāo)記還是會(huì)出現(xiàn)的。所以正確的寫法是：margin:0; padding:0; list-style:none;雖然預(yù)設(shè)標(biāo)記很不錯(cuò)，但是卻沒辦法精確控制，所以在實(shí)際應(yīng)用中并不推薦使用，還是用背景圖來代替！

【編輯推薦】

XHTML 代碼規(guī)范
語義化HTML結(jié)構(gòu)漫談
HTML頁面如何象ASP一樣接受參數(shù)

責(zé)任編輯：王曉東來源： 9host

Firefox HTML