Wir wissen, dass die Eigenschaften des SELECT -Tags in jedem Browser und die Unterstützung jedes Browsers unterschiedlich sind, wodurch das ausgewählte Auswahlfeld in jedem Browser unterschiedlich angezeigt wird. Im Folgenden erstellen wir eine vollständig kompatible Auswahl durch die Unterstützung der CSS -Attribute für das Erscheinungsbild.
Ich habe die Methode zur Steuerung von Variablen verwendet, um eine Demo zu schreiben, um drei Situationen auf jedem Browser zu testen: Höhe.100.Padding.0, Höhe.NO.Padding.100, Nr. Height.No.Padding. Die Ergebnisse lauten wie folgt: Linkbilder, das Erscheinungsbild der Demo jedes Browsers.
Wir können die folgenden Forschungsattribute ableiten.
dh6 | IE7 | IE8 | dh9 | ff | Ch | sf | op | |
Standardhöhe | 22px | 22px | 19px | 20px | 19px | 19px | ||
Höhe | F | T | T | T | T | T | F | T |
Polsterung | F | F | T | T | T | T | F | T |
Linienhöhe | F | F | F | F | F | F | T | F |
Text vertikal zentriert | T | T | T | F | F | T | T | T |
Durch die oben genannte Zusammenfassung der Forschungsergebnisattribute wissen wir, dass IE6 jederzeit bei 22px festgelegt und unverändert bleibt, während andere Browser mit Ausnahme von Safari das Höhenattribut unterstützen, sodass wir die Höhe festlegen: 22px. Lassen Sie uns nun den Safari -Browser korrigieren. Wir haben festgestellt, dass nur Safari das Attribut für die Linienhöhe unterstützt, sodass Sie die Leitungshöhe verwenden können, um seine Höhe auf 22px zu korrigieren. Wenn die Schriftgröße 12px ist, wird eine Linienhöhe: 22px eingestellt. Am Ende ist der Text in FF und IE9 nicht zentriert und die Polsterung: 2px 0 wird eingestellt. Wir fanden heraus, dass FF und IE9 zentriert sind, aber die Höhe der Auswahl jedes Browsers hat nicht erhöht. Hier gibt es also ein wenig Zweifel, unter der Höheneinstellung erhöht die Polsterung einer kleinen Anzahl von Zahlen die Gesamthöhe nicht?
Unten finden Sie ein vollständig kompatibles Code -Beispiel.
Kopieren Sie den Code