Animation funktioniert nicht im IE 10

Andimau · 01.02.2017

Hallo
habe das Problem das diese Animation nicht im IE funktioniert. (Chrom und Opera funktioniert)

Vielleicht ja jemand eine Idee warum. : )

Code:

#navbar #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal li .mega-sub-menu li a:hover{
border-left:8px solid #fff !important;
transition: all 0.5s ease-in !important;
-webkit-transition: all 0.5s ease-in !important;}

Myhar · 01.02.2017

Edit: Sorry, war falsch.

Edit 2: Von diesem Code kann man keine Fehler erkennen, der schaut so weit richtig aus. Abgesehen davon, dass die Variante mit -webkit Präfix als letztes aufgeführt wird, aber das soll dem IE egal sein. Was sagen die IE-Dev-Tools dazu? Wird die Animation "angenommen" (im CSS erkannt)?

Gelöschtes Mitglied 633957 · 01.02.2017

Myhar schrieb:
mit -webkit Präfix als letztes aufgeführt wird, aber das soll dem IE egal sein.

Bist Du Dir sicher? Überschreibt die Vendor-Prefix nicht die Transition-Einstellungen, oder ist das aktuellen Browsern wirklich egal?

Myhar · 01.02.2017

tynick schrieb:
Bist Du Dir sicher? Überschreibt die Vendor-Prefix nicht die Transition-Einstellungen, oder ist das aktuellen Browsern wirklich egal?

Lies meinen Satz nochmal genau, dort ging es nicht um aktuelle Browser sondern um den IE10. Und dem ist ein -webkit Präfix egal. Dass es zB Chrome nicht egal ist steht auf einem anderen Blatt, hat jetzt aber nicht konkret etwas mit der Fragestellung (und dem Problem) zu tun. Abgesehen davon ist die -webkit Anweisung ident zu der normalen Anweisung, so viel kann da also nicht kaputt werden.

noltehans · 02.02.2017

Hi Andimau,

trenn deine ID's und Classes durch Kommas.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta charset="UTF-8">
<style type="text/css">
div a.block {
display:block;
width: 100px;
height: 150px;
background-color: #CDCDCD;
}
#navbar, #site-navigation, .mega-menu-wrap, .mega-menu.mega-menu-horizontal li, .mega-sub-menu li, a:hover{
border-left:8px solid red !important;
transition: all 0.5s ease-in !important;
-webkit-transition: all 0.5s ease-in !important;
}
</style>
</head>
<body>
<div><a href="#" class="block">HALLO</a></div>
</body>
</html>

Myhar · 02.02.2017

@noltehans Woher weißt du wei sein HTML Code aussieht?

noltehans · 02.02.2017

Myhar schrieb:
@noltehans Woher weißt du wei sein HTML Code aussieht?

He, he, du hast recht.

Ich wollte nur mal antesten weshalb der IE überhaupt nichts macht.
Ohne einen Link artet das Ganze sowieso wieder nur in eine wilde Rumraterei aus.