CSS Internet Explorer 11 中的绝对定位错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30335052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute positioning error in Internet Explorer 11
提问by Sherwin Flight
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.
我有一个页面可以在 Google Chrome、Firefox 和 Opera 中正确显示，但在 Internet Explorer 11 中出现错误。
Here is the HTML, with the unnecessary parts stripped out:
这是 HTML，去掉了不必要的部分：
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
And here is the CSS:
这是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;
}
As you can see in this screenshot the #corner element is not positioned correctly.
正如您在此屏幕截图中看到的，#corner 元素的位置不正确。
I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.
我真的不知道该尝试什么，因为这是特定于 Internet Explorer 的。在过去的几个小时里，一直在用代码尝试不同的东西，但到目前为止还没有运气。
采纳答案by Rooster
try adding position:relativeto the containing elements of div#corner, .containerand/or .page-content
尝试添加position:relative到div#corner,.container和/或的包含元素 .page-content
position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.
position:relative 在包含元素上设置绝对定位元素的边界等于父元素，而不是整个页面。
so a value of left:0pxisn't equal to the top left side of the page, but the left side of the parent element.
所以值left:0px不等于页面的左上角，而是父元素的左侧。
It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.
有点令人惊讶的是，这只发生在 ie11 中，尽管它是一个非常简单的问题，这让我怀疑可能很容易有一个辅助解决方案，但话又说回来，自从 ~ie6 以来不得不支持 IE，我想我并不是真正的全部如果它只是 IE 吸吮感到惊讶。
回答by costellofax
Just in case this helps someone else:
以防万一这对其他人有帮助：
I had a similar issue. It looked like ie11 was ignoring the 'right' property:
我有一个类似的问题。看起来 ie11 忽略了 'right' 属性：
right: -320px;
but it turned out to be because I had set the 'left' property to:
但结果是因为我已将 'left' 属性设置为：
left: initial;
Turns out the 'initial' keyword is unsupported by ie11:
原来 ie11 不支持“initial”关键字：
回答by jaunt
Side note:Not sure if this is what you're trying to do, but min-height:100%does not make content's size to 100% the height of the screen.
Replace that with this:
旁注：不确定这是否是您要执行的操作，但min-height:100%不会使content的大小达到屏幕高度的 100%。用这个替换它：
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Anyway, you've set #cornerto
不管怎样，你已经设置#corner为
position: absolute;
top: 20px;
left: 120px;
And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.
这就是 IE 放置它的地方，相对于整个页面。它正在做你告诉它做的事情。对于其他浏览器，与该标题相比，它的位置是绝对的。但是猜测一下，您可能想将其设置为position: relative.
