如何在不同的瀏覽器中創建相同的頁邊空白？ UL邊距

UL元素邊距相同，但Firefox和IE顯示不同。如何在不同的瀏覽器中創建相同的頁邊空白？ UL邊距

alt text

全碼：

<html> 
    <head> 
     <style> 
      body 
      { 
       background-color: Red; 
      } 
      ul 
      { 
       font-family: Verdana; 
       font-size: 8pt; 
      } 
      ul a 
      { 
       text-decoration: none; 
       color: Black; 
      } 
      ul a:hover 
      { 
       text-decoration: underline; 
      } 
      table 
      { 
       background-color: Transparent; 
       border-collapse: collapse; 
      } 
      table tr td 
      { 
       vertical-align: top; 
       text-align: left; 
       font: Verdana, Geneva, sans-serif; 
       font-size: 12px; 
      } 
      #tblYayinAkisi 
      { 
       border: 1px white solid; 
       background-color: #222222; 
       font-family: Verdana; 
       color: #ffffff; 
       vertical-align: middle; 
       font-size: 10pt; 
       width: 100%; 
      } 
      #tblYayinAkisi th 
      { 
       background-color: Transparent; 
       background-image: url(../images/bckSiyahGriTram.png); 
       background-repeat: repeat-x; 
       height: 20px; 
       padding-left: 10px; 
      } 
      #tblYayinAkisi td 
      { 
       background-color: #222222; 
      } 
      #tblYayinAkisi td ul 
      { 
       border: 1px white solid; 
       width: 100%; 
       margin-left: 10px; 
      } 
      #tblYayinAkisi td ul li 
      { 
       clear: both; 
       padding-top: 7px; 
       list-style: none; 
      } 
      #tblYayinAkisi td ul li b 
      { 
       margin-right: 10px; 
       float: left; 
      } 
      #tblYayinAkisi td ul li a 
      { 
       color: #ffffff; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <table id="tblYayinAkisi"> 
      <tbody> 
       <tr> 
        <th> 
         YABAN'da bugün 
        </th> 
       </tr> 
       <tr> 
        <td> 
         <ul> 
          <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li> 
          <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li> 
          <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li> 
          <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li> 
          <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li> 
         </ul> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="text-align: center;"> 
          <img src="images/canliYayin.png" /> 
          <img src="images/tumAkis.png" /> 
         </div> 
         <br /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html>

來源

2010-01-17 uzay95

您需要設置在ul的padding爲好。例如。

ul { 
    padding: 0; 
}

來源

2010-01-17 00:38:34 BalusC

但爲什麼這個工程？ – uzay95 2010-01-17 00:40:51

大多數瀏覽器在某些塊元素上都有默認邊距/填充，與此類似：http://www.w3.org/TR/CSS21/sample.html – BalusC 2010-01-17 00:42:48

哦，這裏有一個更全面的鏈接：http：// css -class.com/test/css/defaults/UA-style-sheet-defaults.htm – BalusC 2010-01-18 13:31:43

添加到您的第一ul聲明：

ul { padding: 0; margin: 0; list-style: none }

您需要調整您的其他ul聲明（即margin-left: 10px），以滿足您的需求，但此規則將歸零出來的差異。

原因是每個瀏覽器都使用padding和margin的不同組合來縮進ul。通過將兩者都置零並僅設置一個（即padding或margin），您可以保持顯示一致。

此外，您需要在代碼中使用有效的DOCTYPE，因此現代瀏覽器不會恢復到Quirks模式。像這樣的東西在你的HTML文件的最上面沒有任何東西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2010-01-17 00:39:46

如何在不同的瀏覽器中創建相同的頁邊空白？ UL邊距

回答

相關問題