Question

在我使用的每个浏览器中，除了ie8之外，绝对定位的元素可以根据具有相对位置的最近父元素进行定位。

下面的代码显示了表格中的两个div。顶部div具有position：relative，但是，嵌套的，绝对定位的元素不尊重它的边界（在ie8中，它位于页面的底部而不是父div的底部）。

有人知道解决这个问题吗？

<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
  <tr>
    <td><div id="top"> Div with id="top"
        <div id="position_me"> Div with id="position me" </div>
      </div>
      <div id="bottom"> Div with id="bottom"
        <p>Lorem ipsum dolor sit amet.</p>
      </div></td>
  </tr>
</table>

Answer 1

声明doctype。我建议您使用HTML5 doctype：

<!DOCTYPE html>

Answer 2

添加：

#top {
//height: 100%;
}
#position_me {
//left: 0;
}

它强制IE8在怪癖模式下正确计算位置。有很多方法可以实现它：

//zoom: 1;
//writing-mode: tb-rl;

请参阅http://haslayout.net/haslayout

Answer 3

那是因为您没有使用文档类型。 IE工作在"quircks" mode。

试试这个doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Answer 4

我总是使用HTML5 doctype，但在我的情况下，唯一的问题是父元素需要“position：relative;”特别设定。之后，它运作得非常好。

Answer 5

您也可以使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这解决了我的问题！

Answer 6

微软表示：

在大多数情况下，我们建议网站使用HTML5文档类型支持最广泛的既定和新兴标准，以及最广泛的网络浏览器。这个例子说明了如何指定HTML5文档类型。

了解更多Info

如何在IE8中修复绝对定位？

6 个答案: