Hintergrund

Ich entwickle eine Website mit jQuery, jQuery Validation und jQuery Autocomplete. Ich entwickle ein Formular, das Validierung verwendet, um sicherzustellen, dass einige Formularelemente gültig sind, Autocomplete, um ein Textfeld zu füllen, und dann AJAX, um das Formular dynamisch zu ersetzen. Das Formular enthält einige Formularelemente, einschließlich einiger Dropdown-Listenfelder (...). Die Listenfelder sind mit CSS3 formatiert (mit Modernizr für Abwärtskompatibilität).

Das Problem

Das Problem ist mit dem Internet Explorer. Ich teste mit IE9, aber ich glaube nicht, dass es auch in IE7 oder IE8 funktioniert. Es gibt zwei Dropdown-Auswahlfelder, und beide haben eine Fehlfunktion. Wenn der Benutzer auf den Dropdown-Pfeil klickt, um die Liste auswählbarer Optionen anzuzeigen, wird die Liste ausgeblendet, sobald der Mauszeiger darüber bewegt wird, um eine Auswahl zu treffen, als ob der Benutzer mit der Maus geklickt hätte (ohne die Auswahl zu treffen). p>

Weitere Hinweise: -

• Die Boxen verhalten sich in jedem anderen Browser korrekt.
• Die Boxen sind mit CSS3 gestaltet.
• Wenn ich die Kompatibilitätsansicht ändere, funktionieren die Kästchen wie sie sollten, obwohl sie schrecklich aussehen.

Der Code

HTML

CSS

Die Frage

Weiß jemand, ob das ein Skript-Bug oder ein CSS-Bug ist? Ich habe versucht, im Internet nach ähnlichen Problemen zu suchen, habe aber keine Hinweise. Es wäre gut, nur einen Einblick zu bekommen, welche Dinge den Fehler verursachen könnten.

Ich habe eine Ahnung, dass es sich um einen CSS-Fehler handelt, weil die Kompatibilitätsansicht den Fehler verschwinden lässt. Es wäre gut, wenn jemand nachprüfen würde, ob ich richtig oder falsch liege und einen Einblick gewähre.

Wenn jemand irgendwelche Informationen zu diesem Thema hat, oder eine vorgeschlagene Lösung wäre ich sehr dankbar.