Абсолютная погрешность позиционирования в 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

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

значит значение left:0px не совпадает с левой стороной вверху слева, а слева.

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

Answer 2

Примечание стороны: Не уверен, если это то, что вы пытаетесь сделать, но min-height:100% не делает размер content «s до 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: initial; 

Оказывается, «первоначальный» ключевое слово не поддерживается на ie11:

left: initial doesn't work in internet explorer