1

我将 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/

4

1 回答 1

0

删除.d中的 float 属性。并在.c代表的 display:table-row 中使用.d的表格单元格。在 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在 adisplay:table-row中可能有点无效，说旧 HTML：

<table>
  <tr>
    <div> <!-- expected: a <td> -->
       ..
于 2015-08-18T12:29:00.237 回答