IE6，IE7：将最后一个拉伸到前一个li的累积宽度

Question

鉴于此标记：

<ul class="grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

如何使其显示，跨浏览器，如下：

换句话说：最后一项（假伪类last-child）应始终伸展以容纳{{1}的先前任意数量（当然在理由范围内）的累积总宽度}的

这是我到目前为止所做的：

<li>

IE6将最后ul.grafiek { float: left; } ul.grafiek li { float: left; display: block; margin-left: 6px; width: 56px; height: 66px; padding: 12px 0; color: #fff; text-align: center; font-size: 11px; line-height: 1; background-color: #c5015a; } ul.grafiek li.first-child { margin-left: 0; } ul.grafiek li.last-child { clear: both; margin: 10px 0 0 0; width: 100%; height: 23px; padding: 0; line-height: 23px; background-color: #0a2d7f; } 拉伸到<li>父级的总宽度。 IE7根本没有伸展它。如何才能在这两种浏览器中使用它？

PS：Firefox，Chrome和Opera的预期效果很好。

Answer 1

可以ul.grafiek定义显式宽度吗？如果是这样，那应该适用于IE，因为它有计算浮动总宽度的问题。

Answer 2

尝试在position: relative;

上设置zoom: 1;和/或ul.grafiek

Answer 3

我曾尝试拼了命这一个干净，只有CSS的方式做，但我最终来大致相同的点作为自己。 IE6首先计算最后一个列表项的100％宽度，然后围绕它包装父项。 （我的IE7无法正常工作，无法测试。）

我可以推荐的是，您为所需的所有不同数量的项目创建类（最多不超过屏幕宽度可容纳的数量），并修改UL的类以匹配内部LI的数量（再次，达到相同的最大值。）

所以你的UL获得了一个等级：

<ul class="grafiek items6_grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

并添加到您现有的CSS：

.items1_grafiek {width: 56px}
.items2_grafiek {width: 118px}
.items3_grafiek {width: 180px}
.items4_grafiek {width: 242px}
.items5_grafiek {width: 304px}
.items6_grafiek {width: 366px}

可能，如果您在JS中动态添加项目，则需要将itemsN_grafiek类更改为正确的类。

Answer 4

我注意到你在最后一个元素上有一个固定的高度。这打开了我们尝试一些绝对定位技巧的大门，我认为（以及一些CSS黑客或条件评论）将为您提供所需的内容。

如果我像这样更改ul.grafiek：

ul.grafiek {
    float: left;
    position: relative;      
    border: 1px dashed gray; /* just for visualization while working on the problem */
    margin: 0;               
    padding: 1px;
    *padding-bottom: 33px;
}

将*position: absolute;和*bottom: 0;添加到ul.grafiek li.last-child，我得到的a layout在Firefox 3.6，Safari 4，IE6和IE7中基本相同。

我说的主要是因为IE和其他所有内容之间的li高度存在一些差异。如果添加doctype声明，这些将消失，但布局将再次在IE6中中断。 ：|