css - 如何修复IE8中的绝对定位？

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>

score 24 · Accepted Answer

24

声明一个文档类型。我鼓励您使用 HTML5 文档类型：

<!DOCTYPE html>

于 2009-09-01T01:20:23.657 回答

score 19 · Accepted Answer

添加这个：

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

它强制 IE8 在 quirks 模式下正确计算位置。有很多方法可以得到它：

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

见http://haslayout.net/haslayout

score 13 · Accepted Answer

那是因为您没有使用文档类型。而 IE 在“怪癖”模式下工作。

试试这个文档类型：

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

score 6 · Accepted Answer

我总是使用 HTML5 文档类型，但在我的情况下，唯一的问题是父元素需要“位置：相对；” 专门设置的。在那之后，它工作得很好。

score 2 · Accepted Answer

你也可以使用

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

这解决了我的问题！

score 0 · Accepted Answer

微软说：

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

欲了解更多信息

css - 如何修复IE8中的绝对定位？

6 回答 6

Related

Reference