html - IE 将 "top"设置为百分比值不适用于表格单元格内的绝对定位元素

Question

我已经尝试了以下方法，它在 Firefox、Opera、Chrome 和 Safari 中运行良好。我无法让它与 IE 一起使用，我是否遗漏了什么？ http://jsfiddle.net/amrn/qn0dwohn/

在 .centered 中，left 属性工作正常，但它似乎忽略了 top。

(我正在使用 table 和 table-cell 因为我希望 .right 的高度自动与 .left).

.wrapper {
  display: table;
}

.left,
.right {
  display: table-cell;
  width: 200px;
}

.left {
  height: 200px;
  background-color: orange;
}

.right {
  background-color: teal;
  position: relative;
}

.centered {
  background-color: tomato;
  height: 70px;
  width: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="centered"></div>
  </div>
</div>

Answer 1

似乎有几种方法可以解决这个问题。

已更新

因为 IE 在使用表格单元格时似乎存在绝对定位问题，您可以添加另一个使用 display: block; 的嵌套 div 你 can see the js.fiddle here .

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="nest">
        <div class="centered"></div>
    </div>
  </div>
</div>

.nest {
  position: relative;
  background: pink;
}

第二种方法是不使用 display: table-cell 而是使用 display: inline-block 像这样:

.wrapper {
  display: block;
}

.left, .right {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
}

.left {
  background-color: orange;
}

.right {
  background-color: teal;
}

.centered {
  background-color: tomato;
  height: 70px;
  width: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
}

您可以 see this working in your Js.Fiddle here .

或者最后，您可以做最简单的修复，即为您的 HTML 和 BODY 添加高度，这将使您的表格的高度大于 0，因为其中不存在任何内容。你可以see a similar SO question here about it .

html, body {
    height: 100%
}

希望对您有所帮助。