html - table-cell 的 child 未占据 100% 的高度(仅适用于 FF)

Question

我希望有相同高度的列，所以我创建了一个 display:table 容器和 display:table-cell 子容器，它们都有 height:100 % 设置。问题是，它只在 Firefox 上如我所愿地工作，但在 Chrome 和 IE11 上不起作用。

Here's the fiddle

下面是HTML代码:

<div class="featured">
<div class="row">
    <div class="one-half">
        <div class="light-bg">
            <div class="row">
                <div class="one-quarter"><div class="icon icon-server icon-1"></div></div>
                <div class="three-quarter">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le
                </div>
            </div>
        </div>
    </div>
    <div class="one-half">
        <div class="light-bg">
            <div class="row">
                <div class="one-quarter"><div class="icon icon-server icon-2"></div></div>
                <div class="three-quarter">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le
                </div>
            </div>
        </div>
    </div>
</div>
</div>

这是 CSS:

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}
.row{
    margin-bottom:20px;
    margin-left:-10px;
    margin-right:-10px;
}
.row:before,
.row:after{
    content: "";
    display: table;
}
.row:after{
    clear:both;
}

.one-half, .one-quarter, .three-quarter{
    float:left;
    padding:0 10px;
    box-sizing:border-box;
}
.one-half{
    width:50%;
}
.one-quarter{
    width:25%;
}
.three-quarter{
    width:75%;
}
.light-bg{
    background:#ddd;
}
.featured > .row{
    display:table;
    height:100%;
}
.featured > .row .one-half{
    display:table-cell;
    height:100%;
    float:none;
    vertical-align:top;
}
.featured > .row .light-bg{
    padding:20px;
    border-radius:4px;
    height:100%;
}
.featured > .row .light-bg .row{
    margin-bottom:0;
}

.featured > .row .light-bg h6{
    margin:0 0 10px 0;
    color:#000;
}
.featured > .row .light-bg .icon{
    text-align:center;
    width:100%;
    height:96px;
    background:#fff;
}

非常感谢任何想法。我不能使用 flexbox，因为 IE9 不支持它。

谢谢。

Answer 1

因为所有浏览器都可以检测到.one-half的高度正确(Chrome 除外)，最后我使用 JavaScript 显式设置它的高度来解决 IE(和任何其他浏览器)的这个问题，因为子元素使用 height:100% ，其中一个 child 是具有背景颜色的元素。

对于 Chrome，我必须申请 display:table;至 .light-bg允许正确检测 .one-half 的高度 parent 。