Ich habe eine einfache Sprache, die Seite mit reinen CSS animierten Übergängen auswählt. Ich habe hier ein gemacht.
Wie soll es sich verhalten?
In Chrome verhält es sich wie erwartet.
Wenn Sie in Firefox über ein Bild klicken, bewegen sich beide nach oben.
In Opera verhält es sich meistens wie erwartet, aber der Text springt nach dem Hochfahren zurück.
Ich versuche zu verstehen, warum das in diesen Browsern passieren würde und wie ich es beheben könnte, wenn möglich.
Falls jsFiddle nicht aktiv ist, lautet der entsprechende Code:
HTML
%Vor%CSS
%Vor%Ich hatte auch auf Firefox (v12) seltsame Probleme, bei denen es beide Elemente beim Schweben bewegte. Spätere Versionen (19v), schien es gelöst.
Ich denke, da war was los mit deinen Selektoren und wie Mozilla Dinge im Vergleich zu Webkit interpretiert. Sehen Sie, ob dies jsfiddle für Sie funktioniert.
Alles, was ich wirklich getan habe, war, viele Selektoren von a in .langcell zu ändern und es scheint zu funktionieren. Ich musste ein bisschen CSS anpassen, um den gleichen Stil zu erreichen, wie der verschachtelte .langcell a Selektor. Ich habe den Verdacht, dass es möglicherweise daran liegt, dass a standardmäßig inline ist, während p Block ist und img Inline-Block ist.
Ich werde nicht lügen und sagen, ich verstehe ganz genau, warum das zu Beginn passiert ist, aber im Allgemeinen ist es nicht nur eine Vorliebe, Klassen über Elemente hinweg Stile zu geben, es ist auch effizienter beim Rendern.
Code:
%Vor%CSS3 ist ziemlich neu. Und viele der Funktionen sind in vielen Browsern noch nicht kompatibel. Kompatibilitätsliste
Es ist also etwas abstoßend, wenn Ihre Kunden etwas ältere Browser haben (selbst wenn sie eine einjährige Version haben), in diesem Fall funktioniert der CSS3-Übergang nicht.
Ihre sicherste Wette, um den Übergang zu machen, ist es mit Javascript oder einer Javascript-Bibliothek wie jQuery
zu tunTags und Links css css3 cross-browser css-transitions