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

【问题标题】：IE6, IE7: stretch last li to cumulative width of previous li'sIE6、IE7：将最后一个 li 拉伸到前一个 li 的累积宽度
【发布时间】：2011-04-20 10:00:30
【问题描述】：

鉴于此标记：

<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）应该始终拉伸以适应<li>的前一个任意数量（当然是在合理范围内）的累积总宽度

这是我目前所拥有的：

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;
}

IE6 将最后一个<li> 拉伸到<ul> 的父级的总宽度。 IE7 根本没有拉伸它。如何让它在这两个浏览器中也能正常工作？

PS.：Firefox、Chrome 和 Opera 运行正常。

【问题讨论】：

标签： css list layout internet-explorer-7 internet-explorer-6

【解决方案1】：

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

【讨论】：

不，抱歉，仅作为最后的手段。我希望它能够容纳任意数量的具有相同宽度和左边距的前面<li>s。
除非有一些我不知道的晦涩的 css 解决方法，否则您必须以像素为单位指定显式宽度或使用 JS 计算它。
@fire：对于 IE，您可以有条件地包含 CSS（条件 cmets）并使用 CSS expression (JavaScript) 动态计算总宽度。可能比使用 IE-hack 破坏基于标准的 CSS 更好。
@Tomalak，是的，我也想过。如果其他一切都失败了，也可能是一种选择。

【解决方案2】：

尝试在ul.grafiek 上设置position: relative; 和/或zoom: 1;

【讨论】：

这绝对是真的。我主要想知道其中任何一个是否会给 IE 额外的提示，它似乎需要为该宽度语句获取正确的上下文。事实证明，正如您正确预测的那样，它们都没有做任何其他事情......但是在最后一个 li 上设置 position: absolute; 确实（请参阅我的另一个答案）。

【解决方案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 类更改为正确的类。

【讨论】：

【解决方案4】：

我注意到最后一个元素的高度是固定的。这为我们打开了尝试一些绝对定位技巧的大门，我认为（连同一些 CSS hack 或条件 cmets）会得到你想要的。

如果我像这样更改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 中中断。 :|

【讨论】：