Абсолютная ошибка позиционирования в 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, 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. Пробовал разные вещи с кодом за последние пару часов, пока не повезло.

Ответ 1

попробуйте добавить position:relative к содержащим элементам div#corner, .container и/или .page-content

position: relative на содержащем элементе устанавливает границы абсолютно позиционированного элемента, равного родительскому элементу, а не всей странице.

поэтому значение left:0px не равно левой верхней части страницы, а левой стороне родительского элемента.

Это несколько удивительно, что это происходит только в ie11, хотя это довольно простая проблема, из-за которой я подозреваю, что может быть легко альтернативное решение, но опять же, имея необходимость поддерживать IE с ~ ie6, я думаю, что я не действительно все, что удивило, если его просто сосать IE.

Ответ 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.

Ответ 3

На всякий случай это помогает кому-то еще:

У меня была аналогичная проблема. Похоже, что ie11 игнорировал свойство "right":

right: -320px;

но оказалось, что я установил свойство left:

left: initial;

Выключает ключевое слово 'initial', не поддерживается if11:

left: инициал не работает в Internet Explorer