IE7中内联块容器内的100％宽度块

Question

我对IE7有疑问。内联块容器内的块元素未拉伸以适应容器宽度。

代码：

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

.a {
    border: 5px solid blue;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.b {
    width: 500px;
    height: 10px;
    background: green;
}
.c {
    height: 10px;
    background: red;
}

以下是其他浏览器中所需的行为：

这是我在IE7中得到的：

实施例： http://jsfiddle.net/Lnfwezm4/5/

直接链接： http://fiddle.jshell.net/Lnfwezm4/5/show/

如何在IE7中实现红色块以适合父宽度（IE6也会很棒）？

Answer 1

为.a添加任何宽度将解决这个问题：

.a {
    border: 5px solid blue;
    display: inline-block; *display: inline; zoom: 1;
    width: 500px;
}

让我们看看幕后发生了什么。您有一个块元素，其默认宽度为父元素宽度的100％。 .c的父元素是.a，它没有宽度（无论是隐式设置100％还是其他任何宽度），而它的宽度取决于它的孩子...所以，100％未定义未定义，或者，在这种情况下，0px; （我故意简化了一些事情）

在我看来，让IE7知道如何计算.c宽度的唯一方法是给.a一些宽度（不一定是固定的，也可以是％或其他单位）。

如果您出于任何原因，不能给.a提供任何宽度，请告诉我们为什么以及您要做什么。它有可能通过稍微不同的标记来实现。