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

Answer 1

尝试将position:relative添加到div#corner，.container和/或.page-content

的包含元素中

position：相对于contains元素设置绝对定位元素的边界等于父元素，而不是整个页面。

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

这有点令人惊讶，这只发生在ie11虽然因为它是一个相当简单的问题，这让我怀疑可能很容易有一个辅助解决方案，但是又一次，不得不支持IE，因为〜ie6我想我不是如果只是IE吸吮，那真是令人惊讶。

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。

Answer 3

以防这有助于其他人：

我有类似的问题。它看起来像ie11忽略了'对'＆＃39;财产：

right: -320px;

但事实证明是因为我设置了“离开”。财产：

left: initial;

原来＆＃39;初始＆＃39; ie11：

不支持关键字

left: initial doesn't work in internet explorer