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

旁注：不确定这是否是您想要做的，但是 min-height:100% 不会使 content 的大小变为 100 % 屏幕高度。将其替换为：

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

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

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

这就是 IE 相对于整个页面放置它的位置。它正在做你告诉它做的事情。对于其他浏览器，它的位置与 header 相比是绝对的。但猜测一下，您可能想将其设置为 position: relative.

Answer 2

尝试将 position:relative 添加到 div#corner、.container and/or .page-content

的包含元素

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

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

有点令人惊讶的是，这只发生在 ie11 中，因为它是一个非常简单的问题，这让我怀疑很容易有第二个解决方案，但话又说回来，我想我从 ~ie6 开始就不得不支持 IE'如果只是 IE 很烂，我真的不会感到惊讶。

Answer 3

以防万一这对其他人有帮助：

我遇到了类似的问题。看起来 ie11 忽略了 'right' 属性:

right: -320px;

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

left: initial;

事实证明 ie11 不支持 'initial' 关键字：

Internet Explorer 11 中的绝对定位错误

Absolute positioning error in Internet Explorer 11

css

css-position

internet-explorer-11