Problem mit top: 50% im IE

[bodo92]

Ich hab mir ne kleine Galerie mithilfe eines Bootstrap-Modal gebaut.

Habe jetzt beim Testen im IE bemerkt das die Pfeile der Galerie nicht Vertikal mittig ausgerichtet sind!
Probleme macht folgende CSS anweisung:

#gallery-prev i {
    position: relative;
    top: 50%;
    left: 5px;
    margin-top: -24px;
}

Link zur Seite: http://feuerwehr.ebelmxi.de/einsaetze/details/9

Seltsam finde ich wenn ich in den Dev-Tool vom IE das CSS-Attribut top: 50% mal abwähle und wieder anwähle das dann der Pfeil mittig ausgerichtet wird!!

 

[threadi]

Wenn Du die Ausrichtung mit absoluter Positionierung machst, musst Du auch eine Breite oder (in deinem Fall) Höhe für das Element angeben. Dann sollte auch der IE es rendern.

 

[Tronjer]

Ich würde gar kein top und left ohne prefixendes margin- verwenden.

Ein margin-left: calc(100% - XXpx) tut es auch.

 

[bodo92]

Danke für eure Tipps,

hab es bei relativer Positionierung mit margin-top: (50% - 32px) versucht aber das hat jeder Browser anders interpretiert
Habs jetzt "Quick and Dirty" gemacht ;)

#gallery-prev i {
    position: absolute;
    top: calc(50% - 32px);
    left: 5px;
}

 

[threadi]

Oder du versuchst es mal mit translate() ;)
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/