IE6浮動清除問題 - 他們自己清理！

Question

我正在構建一個包含浮動項目以創建2列的UL列表的頁面。請參閱http://epraxadev.com/valencia/food_truck_festival/index2.php

它在Firefox，Chrome，Safari，IE8和IE7中運行良好。唯一的問題是在IE6中。在IE6中，代替列表元素堆疊在整齊的2行列中，縮略圖浮動到左側，縮略圖的描述浮到右側，該描述以某種方式神奇地清除浮動的縮略圖。奇！

這裏的標記

<ul id="theTrucks"> 
<li> 
    <a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a> 
    <div class="details"> 
     <p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p> 
     <ul> 
      <li><a href="#" target="_blank">Website &raquo;</a></li> 
      <li><a href="#" target="_blank">Facebook &raquo;</a></li> 
      <li><a href="#" target="_blank">Twitter &raquo;</a></li> 
     </ul> 
    </div> 
</li> 

<li> 
    <a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a> 
    <div> 
     <p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p> 
     <ul> 
      <li><a href="#" target="_blank">Website &raquo;</a></li> 
      <li><a href="#" target="_blank">Facebook &raquo;</a></li> 
      <li><a href="#" target="_blank">Twitter &raquo;</a></li> 
     </ul> 
    </div> 
</li> 

<li class="clear"></li> 

...repeats 

而這裏的CSS：

<style type="text/css"> 
ul#theTrucks { margin:1em 0 0; padding:0; } 
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; } 
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; } 
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; } 
ul#theTrucks li div p { margin-bottom:0.5em; font-size:11px; line-height:1.2; } 
ul#theTrucks li div ul { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; } 
ul#theTrucks li ul li { list-style-type:none; margin:0; } 

ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; } 
</style> 

<!--[if lte IE 6]> 
<style type="text/css"> 
ul#theTrucks li div { width:100px; clear:none; } 
</style> 
<![endif]--> 

注意IE6特有的風格，使DIV只有100像素，所以我知道這是不是因爲含Li（在320px）太小而不能包含它。

Answer 1

找出問題所在。最裏面的無序列表<li>標籤繼承了容器<li>標籤的寬度，這是320px。我設置像這樣的內部<li> s：

ul#theTrucks li ul li { width:230px; margin:0; } 

和ta da！沒有更多的對齊問題= D

Answer 2

http://www.thedimsumtruck.com/Index/Home.html是一個frigging混亂！你幾乎可以在IE8中滾動頁面。