Div 没有在 Internet Explorer 中占据表格单元格的 100% 高度？

Question

HTML

<li class="post">
    <div class="row">
        <div class="col-xs-12 col-sm-6 image">
            <div class="details-hover">
                <a href="#" class="vertical-align">Read more</a>
            </div>
            <div class="image-wrapper">
                <img src="images/3245675.jpg" alt="image" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 description">
            <div class="details">
                <div class="date-and-likes">
                    <div class="date">
                        <i class="fa fa-caret-down"></i>
                        <p class="">27 Oct</p>
                    </div>
                    <div class="likes vertical-align">
                        <i class="icon-heart"></i>
                        <p>12</p>
                    </div>
                </div>
                <h3>
                    <a href="#" class="d-text-c">Service &#38; Support on the iPhone 6. reviews and guide</a>
                </h3>
                <div class="author-and-coments">
                    <div class="author">
                        <p>By <a href="#">Admin</a></p>
                    </div>
                    <div class="comments">
                        <i class="icon-bubbles"></i>
                        <p>2 comments</p>
                    </div>
                </div>
            </div>
            <div class="preview">
                <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray...</p>
                <div class="read-more">
                    <i class="fa fa-caret-right"></i>
                    <i class="fa fa-caret-right"></i>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
    </div>
</li>

CSS

.post-section .post {
  margin-bottom: 60px;
  display: table;
}
.post-section .post .image,
.post-section .post .description {
  padding: 0;
  float: none;
  display: table-cell;
  vertical-align: top;
}
.post-section .post .description {
  padding-bottom: 60px;
}
.post-section .post .row {
  padding: 0 15px;
}
.post-section .post .image {
  position: relative;
}
.post-section .image-wrapper {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.post-section .post .image img {
  height: 100%;
}
.post-section .post .image .details-hover:hover {
  opacity: 1;
}
.post-section .post .image .details-hover {
  z-index: 33;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

我需要创建一个帖子列表，左侧是图片，右侧是内容。问题是 Chrome、Opera 和 Firefox 会根据需要渲染此代码，但 IE 不会。

这里有一些图片。

Answer 1

在你的：

<div class="details-hover" style="border: 1px solid blue; border-image:none;"<...</div

您需要在 Internet Explorer 中设置height: 100%; 的值。