css - Internet Explorer 11中的绝对定位错误

我有一个页面可以在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。在过去的几个小时里，一直在尝试用代码进行不同的尝试，但到目前为止还没有运气。

最佳答案

尝试将position:relative添加到div#corner，.container和/或.page-content的包含元素中

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

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

有点令人惊讶的是，这仅发生在ie11中，尽管它是一个非常简单的问题，使我怀疑可能很容易有辅助解决方案，但是话又说回来，因为〜ie6，我不得不支持IE，我想我并不是真的惊讶，如果只是IE吮吸。

关于css - Internet Explorer 11中的绝对定位错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30335052/