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:相对于包含元素设置绝对定位元素的边界等于父元素,而不是整个页面.

所以值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忽略了'正确'的属性:

right: -320px;

但事实证明是因为我将'left'属性设置为:

left: initial;

原来,ie11不支持'initial'关键字:

left:initial在Internet Explorer中不起作用