Internet Explorer 中的绝对位置答案

【问题标题】：Position absolute in Internet ExplorerInternet Explorer 中的绝对位置
【发布时间】：2015-09-22 04:16:27
【问题描述】：

我的网站在除 Internet Explorer 之外的所有浏览器上看起来都不错。所有具有 position:absolute 的元素都搞砸了。我尝试添加 left:0px 规则，但没有解决。我该如何解决这个问题？

谢谢！

链接到我的网站：Click Here

【问题讨论】：

请在您的问题中包含所有必要的代码。

标签： html css internet-explorer css-position

【解决方案1】：

将“main”元素上的position:relative 更改为position:absolute 就可以了。

【讨论】：

试图跳入 IE 的深渊永远不会结束，所以我不会太赶上它。需要注意的重要一点是，IE 处理的某些事情与其他浏览器不同（通常是定位、边距等），因此持续测试很重要。您会发现很多“修复”有点老套，但这是您在支持 IE 时付出的代价。

【解决方案2】：

父级（主）的默认值为 position:static，这会导致具有 position:absolute 的子级对页面来说是绝对的。使 position:relative for main 导致孩子在 main 中是绝对的。似乎 IE 的不同之处在于它恰好在其他浏览器中看起来不错。请参阅CSS tricks 了解更多信息。此示例适用于 Internet Explorer 和大多数其他浏览器。

<html>
<head>
<style>
.outer { position:relative; height:100px; border:1px solid black; }
.inner { position:absolute; bottom:0px; }
</style>
</head>
<body>
<div class=outer>
    <div class=inner>
        This is some text.
    </div>
</div>
</body>
</html>

【讨论】：