css - "height=100%"在 IE9 中不工作

Question

我将 HTML 定义为这样。

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

CSS 样式定义为:

html,body
{
    height:100%;
    width:100%;
}
.a
{
    display:table;
    height: 100%;
    width: 99%;
    background: green;
    padding-top: 10px;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.b
{
    background: yellow;
    display:table-row;
    padding-bottom: 10pt;
    margin-left: 5pt;
    float: left;

}
.c
{
    background: pink;
    display:table-row;
    height:100%;
    width: 100%;
}

.d
{
    display: block;
    width: 100%;
    height: 100%;
    float: left;
}

在 Firefox、Safari、Chrome 中，类为“d”的 div 与其父 div 元素具有相同的高度。但是在IE9中，类为“d”的div的高度等于0。有没有人知道原因。

这是上面测试代码的链接 http://jsfiddle.net/ZDY4P/19/

Answer 1

删除.d 中的 float 属性。并在 .c 代表的 display:table-row 中为 .d 使用 table-cell。适用于 IE9:

http://jsfiddle.net/ZDY4P/45/

.d
{
    background: orange; /* added a marker color */
    display: table-cell;
    width: 100%; /* or 50% or auto for multiple columns... */
    height: 100%;
}

如果您需要在 .c 中有多个 100% 高度的列，请添加多个 D，如 jsfiddle 中所示。

为了 IE9 的荣誉:我没有列表，允许哪种显示嵌套，但嵌套 display:block; float: left inside a display:table-row 可能有点无效，用旧的 HTML 来说:

<table>
  <tr>
    <div> <!-- expected: a <td> -->
       ..