Karussell in jquery rutscht nicht korrekt im Internet Explorer, tut aber in anderen Browsern

Question

Ich erstellte ein Karussell in Jquery , die ein Element oder eine Reihe von Elementen nach oben oder unten verschiebt.

die Demo-Seite erstellt i Anwendungen 1 Artikel pro Seite/Dia/sichtbarer Abschnitt ...

aber es ist nicht so schwer, es zu 2 oder 3 zu erweitern ...

es einige anderen Features hat das habe ich eingebettet, aber diese sind für diese Frage nicht wichtig.

mit dem Karussell in Internet Explorer 6 oder 7 (habe noch nicht 8 versucht) es funktioniert die ganze Funktionalität, aber es gleitet weniger als es sein soll.

Ich habe alles von Padding zu Margen überprüft, weil ich weiß, dass diese in der Regel das Problem zwischen Browsern sind. Wenn Sie jedoch einmal nach unten rutschen, werden Sie das Problem nicht wirklich sehen, weil es nur 5 oder 10 px entfernt ist, aber wenn Sie ein paar Mal anfangen zu gleiten, summiert sich das.

kann jemand schauen und sehen, ob sie etwas finden können, das ich nicht bemerke?

Ich kann nicht den ganzen Code in diesem Beitrag hinzufügen, aber ich füge einen Link zu der HTML-Datei und zu einer Zip-Datei, die den gesamten Code einschließlich Bilder enthält.

Link zur Demo: demo Link zur Quelle: source zip

Sander

EDIT i wie unten im Kommentar erwähnt, modifizierte ich den Code ein bisschen, als Emily i vorgeschlagen bekam los von den Rändern und ging sogar noch weiter, entfernt alle Ränder und Abstände zwischen den Elementen, feste Imgs, um den Unterschied zwischen den Elementen abwechselnd bgcolor geändert zu sehen.

das habe ich bemerkt, auch Firefox ist um 5px aus, aber es erhöht sich nicht mit jeder Seitenänderung. während IE6 - 7 fügen 5 px jede Seite ändern.

Link auf die geänderte Version: changed demo

Sander

EDIT nach festen i der Zip-Datei erneut hochgeladen, mit nun auch die Arbeitsversion nach dem Update von Emily einschließlich. so dass jeder, der das Skript verwenden möchte, fühlen Sie sich frei, um es aus dem obigen Link zu bekommen ...

Answer 1

Es ist der doppelte vertikale Marge Bug in ie. Da Sie absolute Positionierung verwenden, setzen Sie einfach oben: 16px, anstatt mit dem Rand zu stoßen.

.FotoCarousel .wrapper { 
    height:100px; 
    position:absolute; 
    top:16px; 
    width:159px; 
} 

---

bearbeiten nach Kommentar

ändern

.FotoCarousel ul li a img { 
    display:block; 
} 

zu

.FotoCarousel ul li a img { 
    vertical-align:bottom; 
} 

ein Block-Level-Element (das img) innerhalb eines Inline-Ebene Element (das ein) wird uneinheitlich zwischengestellt Browser. Auch IE6/7 wird Platz für Unterlängen lassen, auch wenn Sie nur ein Bild und keinen Text haben. Die vertical-align:bottom entfernt diesen Raum.