IE6 中的浮动清除问题 - 他们自己清除！答案

【问题标题】：Float Clearing Problem in IE6 - They're Clearing By Themselves!IE6 中的浮动清除问题 - 他们自己清除！
【发布时间】：2012-05-10 22:17:49
【问题描述】：

我正在构建一个页面，其中包含一个 UL 列表，其项目浮动以创建 2 列。见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 只有 100px，所以我知道这不是因为包含的 li（320px）太小而无法包含它。

【问题讨论】：

标签： css internet-explorer-6 css-float

【解决方案1】：

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

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

还有哒哒！不再有对齐问题=D

【讨论】：

【解决方案2】：

http://www.thedimsumtruck.com/Index/Home.html 真是一团糟！您几乎不能在 IE8 中滚动页面。

【讨论】：