的額外空間

查看關於IE7（或在IE7模式的Internet Explorer更高版本）下面的代碼：的額外空間

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     ol, li 
     { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
     } 
     li 
     { 
      background: yellow; 
     } 
     li table 
     { 
      background: red; 
      margin: 0; 
      padding: 0; 
      border: none; 
     } 
    </style> 
</head> 
<body> 
    <ol> 
     <li> 
      <table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table> 
     </li> 
     <li> 
      <table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table> 
     </li> 
    </ol> 
</body> 
</html>

的空間在底部加入被每個李。任何想法爲什麼？你怎麼能刪除多餘的空間？

注：我試着用一個DIV與display:list-item代替李，我也可以重現問題這樣。

來源

2013-03-01 Gyum Fox

有你試圖消除空白？即把一切從''

到''在一行。我知道這會讓格式變得混亂，但值得一試 - 我記得在列表中會出現一些古老的IE，它會渲染空白區域。 – SDC 2013-03-01 16:39:15

是的，我嘗試將所有在OL中的所有內容放在一行中，沒有空格。但它不會改變任何事情。 – 2013-03-01 16:48:04

我發現這個鏈接[IE7-/Win - 列表中的額外垂直空間]（http://www.brunildo.org/test/IEWlispace.php），它報告了相同的錯誤。但是，原因與此不同。我使用開發人員工具欄檢查了我的LI和OL的'hasLayout'屬性，它們都設置爲false（0）。 – 2013-03-01 16:50:28

基於漂泊的回答，設置vertical-align: bottom上慄和zoom: 1會做的伎倆，沒有漂泊的解決方案的可能的副作用。

事實上，我相信zoom: 1可以替換爲給LI佈局的任何屬性，請參閱MSDN。

來源

2013-03-08 11:06:31

IE瀏覽器時，它不應該渲染空白的習慣。這個變化情況：

</table> 
</li>

這樣：

</table></li>

來源

2013-03-01 16:28:27 DiMono

遺憾的是它不工作，即使你寫'

<表的cellpadding = 「0」 CELLSPACING = 「0」 BORDER = 「0」>測試
<表的cellpadding = 「0」 CELLSPACING =」 0「border =」0「>test

' – 2013-03-01 16:30:51

回答

相關問題