web-dev-qa-db-fra.com

Erreur de positionnement absolue dans Internet Explorer 11

J'ai une page qui s'affiche correctement dans Google Chrome, Firefox et Opera, mais qui contient une erreur dans Internet Explorer 11.

Voici le HTML, avec les parties inutiles supprimées:

<div class="container">
    <div class="page-content">
        <div id="corner"></div>
        ... page contents here
    </div>
</div>

Et voici le 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;
}

Comme vous pouvez le voir sur cette capture d'écran, l'élément #corner n'est pas positionné correctement.

enter image description here

Je ne sais vraiment pas quoi essayer, car cela est spécifique à Internet Explorer. J'ai essayé différentes choses avec le code au cours des dernières heures sans succès jusqu'à présent.

csscss-positioninternet-explorer-11
24
Sherwin Flight

essayez d'ajouter position:relative aux éléments contenants de div#corner, .container et/ou .page-content

position: relative sur un élément conteneur définit les limites d'un élément absolument positionné égal à l'élément parent, plutôt que la page entière.

donc une valeur de left:0px n'est pas égal au côté supérieur gauche de la page, mais au côté gauche de l'élément parent.

Il est quelque peu surprenant que cela ne se produise que dans ie11, car c'est un problème assez simple qui me fait suspecter qu'il pourrait facilement y avoir une solution secondaire, mais là encore, ayant dû prendre en charge IE depuis ~ ie6 Je suppose que je ne suis pas vraiment très surpris si c'est juste IE sucer.

19
Rooster

Juste au cas où cela aiderait quelqu'un d'autre:

J'ai eu un problème similaire. Il semblait que ie11 ignorait la "bonne" propriété:

right: -320px;

mais il s'est avéré que c'était parce que j'avais défini la propriété "left" sur:

left: initial;

Il s'avère que le mot-clé "initial" n'est pas pris en charge par ie11:

à gauche: l'initiale ne fonctionne pas dans Internet Explorer

5
costellofax

Note latérale: Je ne sais pas si c'est ce que vous essayez de faire, mais min-height:100% ne fait pas de la taille de content à 100% la hauteur de l'écran. Remplacez cela par ceci:

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

Quoi qu'il en soit, vous avez défini #corner à

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

Et c'est là que IE le place, par rapport à la page entière. Il fait ce que vous lui dites de faire. Avec les autres navigateurs, sa position est absolue par rapport à cet en-tête. Mais pour devinez, vous vouliez probablement le régler sur position: relative.

5
jaunt