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);
    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.在过去几个小时内尝试过不同的代码,没有运气到目前为止.

解决方法

尝试添加位置：相对于div#corner,.container和/或.page-content的包含元素

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

所以左边的值：0px不等于页面的左上角,而不是父元素的左边.

这有点令人惊讶,这只是在ie11中发生,虽然它是一个非常简单的问题,这使我怀疑可以轻松地获得第二个解决方案,但是再次,不得不支持IE,因为〜ie6我想我不是真的那样惊讶如果它只是IE吸吮.

原文链接：https://www.f2er.com/css/216655.html

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

解决方法

猜你在找的CSS相关文章