Überladen Bilder funktioniert in Chrome/FF/Rand, aber nicht IE

Ich verwende die folgenden zwei Bilder zu überlagern: Jsfiddle: https://jsfiddle.net/u6y92hmL/1/Überladen Bilder funktioniert in Chrome/FF/Rand, aber nicht IE

HTML:

<div class="overlay-single"> 
    <img class="top" src=http://lorempixel.com/100/100/> 
    <img class="bottom" src=https://placehold.it/300x200> 
</div>

CSS:

.overlay-single { 
    position: relative; 
    text-align: center; 
} 

.overlay-single .top { 
    position: absolute; 
    top: 0; 
    z-index: 1; 
}

In Chrome, FireFox und Edge funktioniert es perfekt mit dem oberen Bild, das an der oberen linken Ecke des unteren Bildes haftet. Aber im Internet Explorer ist das obere Bild links ausgerichtet.

Gibt es eine Möglichkeit, IE auf die gleiche Weise zu verhalten?

Quelle

2016-06-08 PthPndr

sehe ich das Problem, und ich habe nicht eine Lösung (noch) nicht, aber ich möchte nur anmerken, dass es sehr, sehr gefährlich, die Anführungszeichen um Werte weglassen Attribut wie das . Bitte machen Sie es sich zur Gewohnheit, immer nur Anführungszeichen um Attributwerte zu verwenden (selbst wenn Sie sich ziemlich sicher sind, dass sie nicht gebraucht werden), dann werden Sie keine Probleme bekommen. –

@Mr Lister, danke. Ich würde sagen, ich habe es mit Fett gefingert, als ich die Kopierpaste für das Beispiel gemacht habe, aber als ich zurückging und mir den Originalcode anschaute, habe ich sie offensichtlich weggelassen. Ups ... – PthPndr

According to w3c, links, wenn Auto ist, wird das absolut positionierte Box genau erscheinen, wo es gehabt hätte, wenn es nicht positioniert wurde, was bedeutet, IE es falsch macht und benötigen ein Update

eine innere Hülle Hinzufügen machen Es verhält sich wie ein Inline-Element (die Größe wird an den Inhalt angepasst), stellt es auf relative Position und Sie erhalten das gewünschte Ergebnis über den Browser.

.overlay-single { 
 
    text-align:center; 
 
} 
 
.overlay-wrapper { 
 
    position:relative; 
 
    display: inline-block; 
 
} 
 
.overlay-single .top { 
 
    position:absolute; 
 
    top:0; 
 
    z-index:1; 
 
}

<div class="overlay-single"> 
 
    <div class="overlay-wrapper"> 
 
    <img class="top" src="http://lorempixel.com/100/100/"> 
 
    <img class="bottom" src="https://placehold.it/300x200"> 
 
    </div> 
 
</div>

Quelle

2016-06-08 20:21:42 LGSon

danke für die Lösung und Erklärung. Ich weiß, dass ich neu bin, aber zumindest werde ich nicht verrückt. – PthPndr

Überladen Bilder funktioniert in Chrome/FF/Rand, aber nicht IE

Antwort

Verwandte Themen