在IE9 +

Question

我正在尝试让几个div跨越其容器的整个高度（这是一个表格单元格并具有可变高度）。我希望每个div都是其父级的50％，我也希望它们在另一个之上。我所做的是绝对将前一个定位为 top：0;底部：50％; ，底部为底部：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，所以你只看到底部的d​​iv。

IE并没有采取绝对的定位，所以你必须使用：

display:inline-block;

代替。

这是一个更新的jsfiddle。

IE Fiddle