Question

我正在构建一个包含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）太小而无法包含它。

Answer 1

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

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

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

Answer 2

http://www.thedimsumtruck.com/Index/Home.html是一个混乱！您几乎无法在IE8中滚动页面。

IE6中的浮动清除问题 - 它们是自己清除的！

2 个答案: