html - 在 IE9+ 上使绝对定位的 div 成为其父级高度的 50%

Question

我试图让几个 div 跨越它们容器的整个高度(这是一个表格单元格并且具有可变高度)。我希望每个 div 占其父级的 50%，并且我还希望它们彼此重叠。我所做的是将顶部绝对定位为 top: 0; bottom: 50%; 和底部的 bottom: 0;顶部:50%。这种方法适用于大多数浏览器，但适用于 IE9+。

这是我的布局在 Chrome、Firefox 和 Safari 上的样子(令人惊讶的是，IE8 也是如此)以及我在 IE9+ 上得到的:

出于某种原因，这两个绝对定位的 div 在 Internet Explorer 上重叠。

这是我的标记:

<div class="table">
    <div class="cell">
        Bacon ipsum dolor amet short ribs shankle cupim strip steak shank bresaola bacon. Corned beef tri-tip turkey boudin. Strip steak short ribs meatloaf bacon shank kielbasa prosciutto. Pork chop picanha drumstick kielbasa jerky shankle strip steak beef ribs tenderloin pig tail landjaeger turducken.
    </div>
    <div class="cell">
        <div class="top">TOP DIV</div>
        <div class="bottom">BOTTOM DIV</div>
    </div>
</div>

这些是我的风格:

.table {
  display: table;
  background-color: #cbcbcb;
  border-spacing: 10px;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  width: 70%;

  &:first-of-type {
    width: 30%;
  }
}

.bottom,
.top {
  box-sizing: border-box;
  position: absolute;
  background-color: #fff;
  padding: 20px;
  width: 100%;
}

.bottom {
  bottom: 0;
  top: 50%;
  margin-top: 5px;
}

.top {
  top: 0;
  bottom: 50%;
  margin-bottom: 5px;
}

这里有一个可以玩的容器:http://jsbin.com/yifeqe/edit?html,css,output

有什么想法吗？

Answer 1

问题是 position:absolute 在 IE 中阻止了你的 div，所以你只能看到底部的 div。

IE 不接受绝对定位，所以你必须使用:

display:inline-block;

相反。

这是一个更新的 jsfiddle。

IE Fiddle