IE6浮动清除问题 - 他们自己清理！

问题描述：

我正在构建一个包含浮动项目以创建2列的UL列表的页面。请参阅http://epraxadev.com/valencia/food_truck_festival/index2.php IE6浮动清除问题 - 他们自己清理！

它在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）太小而不能包含它。

答

找出问题所在。最里面的无序列表<li>标签继承了容器<li>标签的宽度，这是320px。我设置像这样的内部<li> s：

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

和ta da！没有更多的对齐问题= D

答

http://www.thedimsumtruck.com/Index/Home.html是一个frigging混乱！你几乎可以在IE8中滚动页面。

IE6浮动清除问题 - 他们自己清理！

相关推荐