IE7中列表項之間的CSS差距

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="base.css" /> 
    </head> 
    <body> 
     <ul> 
      <li> 
       <div>row 1.1</div> 
       <div>row 1.2</div> 
      </li> 
      <li> 
       <div>row 2.1</div> 
       <div>row 2.2</div> 
      </li> 
      <li> 
       <div>row 3.1</div> 
       <div>row 3.2</div> 
      </li> 
     </ul> 
    </body> 
</html>

CSS：

ul 
{ 
    padding: 0px; 
    margin: 0px;  
} 

li 
{ 
    list-style-type: none;  
    width: 100%;  
    margin: 0px; 
    padding: 0px; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black;   
} 

li:first-child 
{ 
    border-top: 1px solid black; 
} 

li div 
{ 
    float: left; 
    width: 49.9%; 
}

來源

2011-03-31 Diogo Cardoso

什麼影響，你想實現什麼？爲什麼你在LI中使用div，你應該使用嵌套列表。在這裏演示你的問題http://jsfiddle.net/ – Hawxby 2011-03-31 10:39:55

@Hawxby一個'li'可以包含任何元素，div的標記更少..但測試是在沒有CSS的情況下查看列表是否仍然有意義，沒有這種情況下，我認爲這取決於目的？ – clairesuzy 2011-03-31 10:47:33

浮動的li太

li 
{ 
    list-style-type: none;  
    width: 100%; 
    float: left;  
    margin: 0px; 
    padding: 0px; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black;   
}

這將解決IE7（它在IE7的已知問題），但它也將得到其他瀏覽器包含孩子同時浮動 - （他們沒有這樣做）

還說：### Working Example ###

來源

2011-03-31 10:43:46 clairesuzy

+1資訊。應該也可以添加.clearfix到UL。 – Benxamin 2013-03-06 17:21:44

IE真的不是這裏的問題。
會發生什麼事實上你的每個列表項目之間都有一個包含「\ n \ t \ t \ t」的文本節點，並且由於這些文件不是不可破解的空格，IE將它們解釋爲一個「」，這就是你所看到的。
IE的大部分時間問題都是由於它遵循規範而導致的，而人們則不這樣做。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="base.css" /> 
    </head> 
    <body> 
     <ul> 
      <li> 
       <div>row 1.1</div> 
       <div>row 1.2</div> 
      </li><li> 
       <div>row 2.1</div> 
       <div>row 2.2</div> 
      </li><li> 
       <div>row 3.1</div> 
       <div>row 3.2</div> 
      </li> 
     </ul> 
    </body> 
</html>

來源

2012-04-27 13:17:58

+1修復根本原因。 – Benxamin 2013-03-06 17:22:22

另外：

<!--[if lte IE 7]> 
li { 
... 
margin-bottom: -3px; 
... 
} 
<![endif]-->

來源

2013-03-06 17:24:53 Benxamin

IE7中列表項之間的CSS差距

回答

相關問題