DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> Firefox與IE下UL預設標記的異同
Firefox與IE下UL預設標記的異同
編輯：CSS詳解     

列表UL或是OL中都有一個預設標記，這個標記可能是實點圓點，也可能是數字。在實際的應用中，我們需要去掉這個預設標記，但我們不清楚這個預設標記是存在於什麼位置。因為IE與Firefox似乎在處理UL的預設標記時都有著不同的方式：我們來寫一個UL的Html代碼結構：

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

Html結構：

  1. <ul>   
  2. <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  3. <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  4. <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  5. <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  6. <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  7. </ul>

運行代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5.  <meta http-equiv="Content-Language" content="zh-CN" /> 
  6.  <title>Firefox與IE下UL預設標記的異同</title> 
  7. </head> 
  8. <body> 
  9. <ul>   
  10.  <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  11.  <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  12.  <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  13.  <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  14.  <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  15. </ul>   
  16. </body> 
  17. </Html>

這個UL在不同的浏覽器中的顯示基本上是差不多的。那麼我們設定一下CSS試著看一下IE與Firefox什麼地方不一樣：

CSS代碼：

  1. ul {background:#ddd; padding:0; }
  2.

運行代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5.  <meta http-equiv="Content-Language" content="zh-CN" /> 
  6.  <title>Firefox與IE下UL預設標記的異同</title> 
  7.  <style type="text/CSS"> 
  8.  /*<![CDATA[*/  
  9.   ul {background:#ddd; padding:0; }   
  10.  /*]]>*/  
  11.  </style> 
  12. </head> 
  13. <body> 
  14. <ul>   
  15.  <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  16.  <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  17.  <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  18.  <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  19.  <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  20. </ul>   
  21. </body> 
  22. </Html>

現在只把padding的值設為0，這時我們看一下IE中除了多個背景之外並沒有什麼變化，但是FF中的預設標記不見了！這裡要注意的是IE中的預設標記是在背景外的。我們再來換個方式來設置：

CSS代碼：

  1. ul {background:#ddd; margin:0; }
  2.

運行代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5.  <meta http-equiv="Content-Language" content="zh-CN" /> 
  6.  <title>Firefox與IE下UL預設標記的異同</title> 
  7.  <style type="text/CSS"> 
  8.  /*<![CDATA[*/  
  9.   ul {background:#ddd; margin:0; }   
  10.  /*]]>*/  
  11.  </style> 
  12. </head> 
  13. <body> 
  14. <ul>   
  15.  <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  16.  <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  17.  <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  18.  <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  19.  <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  20. </ul>   
  21. </body> 
  22. </Html>

這裡我們再看，情況相反，IE的預設標記不見了，而FF中的預設標記還在，這裡要注意的是這時Firefox中的預設標記是在背景裡的。當然我們這裡有點不理解了，到底這是為什麼呢？這個預設標記究竟是在什麼地方的呢？下面我們通過一個實例來看一下UL的預設標記是在什麼地方的！

Html結構：

  1. <ul>   
  2. <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  3. <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  4. <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  5. <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  6. <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  7. </ul>

CSS代碼：

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

運行代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5.  <meta http-equiv="Content-Language" content="zh-CN" /> 
  6.  <title>Firefox與IE下UL預設標記的異同</title> 
  7.  <style type="text/CSS"> 
  8.  /*<![CDATA[*/  
  9.   ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }   
  10.   li {background:#aaa;}  
  11.  /*]]>*/  
  12.  </style> 
  13. </head> 
  14. <body> 
  15. <ul>   
  16.  <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  17.  <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  18.  <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  19.  <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  20.  <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  21. </ul>   
  22. </body> 
  23. </Html>

這時我們看到，margin區域是最外圍的白色部分，往裡有點灰色的是border，再往裡是更深一點的灰色，這個區域是padding，最深的區域是內容區。而預設標記正處在padding的區域，那麼是不是說把padding區去掉這個預設標記就會消失呢？我們把CSS做一下修改：

CSS代碼：

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

運行代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5.  <meta http-equiv="Content-Language" content="zh-CN" /> 
  6.  <title>Firefox與IE下UL預設標記的異同</title> 
  7.  <style type="text/CSS"> 
  8.  /*<![CDATA[*/  
  9.   ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }   
  10.   li {background:#aaa;}   
  11.  /*]]>*/  
  12.  </style> 
  13. </head> 
  14. <body> 
  15. <ul>   
  16.  <li>建設部通報八起房地產交易違法、違規典型案例 </li>   
  17.  <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>   
  18.  <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>   
  19.  <li>美國房市“麻煩”未了|底特律房子比車子便宜</li>   
  20.  <li>網絡報告:美國是黑客大本營 中國是最大受害國</li>   
  21. </ul>   
  22. </body> 
  23. </Html>

我們把padding設為0後發現預設標記依然還在，不過這時他處在了border的上面，那麼我們可以根據上面推測出預設標記並不存在於margin,padding或是border中，margin,padding與border只不過為預設標記提供了一個存在並顯示的空間。而這個預設標記是浮於margin,padding與border之上的。

那麼這時我們大致上可能已經理解了，其實IE與Firefox對於UL的默認值的設定是不一樣的，IE給了UL一個margin值，但是卻沒有給padding值，所以IE中UL的預設標記點是在背景外的。而FF相反給了一個padding值卻沒有給margin值，所以在Firefox中UL的預設標記點是在背景內的。但是依據上面的實例我們清楚，這個預設標記點不屬於paading也不屬於margin。他只屬於內容部分，他一直是在內容的外邊緣，當然我們還可以通過CSS來設置其在內容的內邊緣。

通過上面的例子我們清楚了，想要讓這個預設標記消失光用margin:0;與padding:0;因為如果出現了border的寬度達到一定的數值時這個預設標記還是會出現的。所以正確的寫法是：margin:0; padding:0; list-style:none;雖然預設標記很不錯，但是卻沒辦法精確控制，所以在實際應用中並不推薦使用，還是用背景圖來代替！

CSS詳解
影響CSS渲染速度的10條寫法與建議(4)
、CSS的路徑別太深；例如：查看復制打印 #zishu#info#tool#sidebarh2{f
IE與firefox下的Padding的不同
本文和大家重點討論一下IE與Firefox下的Padding的不同，眾所周知IE在處理paddin
CSS高級教程: CSS框架
文章簡介：可以從CSS框架中借鑒到什麼。現在很多人會使用 CSS 框架進行快速建站。那 CSS 框

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
容器定位 用CSS來實現鼠標翻轉的特效代碼 多種方法實現DIV內容居中(2) CSS壓縮的技巧 語言時鐘,不過是用英語提示當前大約的時間啊 極限編程與敏捷開發(1) 通過宜家的家具設計方法學習CSS模塊化 背投廣告設計：用最少的時間來做最效率的事情 CSS布局帶來的巨大影響:CSS display屬性值 DIV+CSS建站時對浏覽器的兼容性問題解決
熱門推薦
target=_blank不符合標准? 空格 在ie與在firefox下長度不一樣問題 兼容好的css透明代碼 css 背景圖片自適應元素大小 用一行代碼解決CSS各種IE各種兼容問題 八大技巧輕松書寫CSS(2) 新手上路 DIV入門指南 文本向上循環滾動,放上鼠標後就自動停止 Photoshop制作CSS網頁制作的背景圖
大家都在看
jQuery實現鼠標選文字發新浪微博的方法 js querySelector和getElementById通過id獲取元素的區別 編寫XHTML網頁代碼的七條規范 jQuery函數的等價原生函數代碼 Jquery Ajax.ashx 高效分頁實現代碼 jQuery點擊自身以外地方關閉彈出層的簡單實例 HTML5實例教程：figure標簽使用實例 HTML5入門新特性
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved