Internet Explorer 11中的绝对定位错误

Question

我有一个页面，在Google Chrome、Firefox和Opera中显示正常，但在Internet Explorer 11中出现错误。

下面是HTML代码，已经去掉了不必要的部分:

<div class="container">
    <div class="page-content">
        <div id="corner"></div>
        ... page contents here
    </div>
</div>

这里是 CSS：

.container {
    margin: 0;
    min-height: 100%;
    padding: 0;
}


.page-content::after {
    content: "";
    display: block;
    height: 1px;
}
.page-content {
    background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 190px 100px 150px;
    max-width: 64em;
    padding: 10px 120px 145px;
    z-index: 2;
}
.page-content {
    margin: auto;
    max-width: 64em;
    padding: 0 1em 1em;
}

#corner {
    background-color: #ffffff;
    background-image: url("corner.png");
    display: block;
    height: 200px;
    left: 120px;
    position: absolute;
    top: 20px;
    width: 200px;
    z-index: -1;
}

正如您在此截图中所看到的，#corner元素的定位不正确。

我真的不知道该尝试什么，因为这是特定于Internet Explorer的。在过去的几个小时中，一直在尝试不同的代码，但到目前为止都没有成功。

- Sherwin Flight

---

你尝试过给页面内容相对定位吗？如果是，并且没有起作用，你能在JSFiddle中重现吗？ - Rooster

дЅ е°ќиЇ•з»™.page-contentж·»еЉ position: relative;дє†еђ—пјџ - sbeliv01

将 position:relative 添加到 page-content 和另一个容器中，问题得以解决。Rooster，由于您先评论，如果您将其作为答案发布，我会接受它。感谢您们的帮助，我也给了你们两个评论点赞。 - Sherwin Flight

Answer 1

尝试在包含 div#corner, .container 和/或 .page-content 的元素上添加 position:relative。

在包含元素上设置 position:relative，会将绝对定位元素的边界设置为与父元素相等，而不是整个页面。

因此，left:0px 的值并不等于页面的左上角，而是父元素的左侧。

令人惊讶的是，这种情况只出现在ie11中，因为这是一个非常简单的问题，所以我怀疑很容易就能找到第二个解决方案。但是，考虑到从 ~ie6 开始支持IE，如果它只是IE太差了，那么我也不会感到惊讶。

- Rooster

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Sherwin Flight

看起来这可能解决了我遇到的问题。我有一些相对定位，使得在Firefox和Chrome上图像对齐看起来正确，但IE却出现了问题。通过实施上述方法，现在所有三个浏览器在它们（错误但容易修复的）对齐方面都是一致的！ - winwaed

如果在IE中仍然出现混乱，请检查是否已指定左侧（或右侧）。 - koubin

Answer 2

注：不确定您是否想要这样做，但min-height:100%并不能使content的大小达到屏幕高度的100%。 请使用以下代码进行替换：

position:absolute;
top:0;
bottom:0;  
left:0;
right:0;

无论如何，您已将#corner设置为

position: absolute;
top: 20px;
left: 120px;

这就是IE相对于整个页面的定位方式。它按照你所要求的方式进行操作。而在其他浏览器中，它相对于页眉的位置是绝对的。但是猜测一下，你可能想将其设置为position:relative。

- jaunt

Answer 3

如果这有助于其他人：

我遇到了类似的问题。看起来ie11忽略了“right”属性：

right: -320px;

但后来发现是因为我将“left”属性设置为：

left: initial;

原来ie11不支持“initial”关键字：

left: initial doesn't work in internet explorer

- costellofax