Die besten Voreinstellungen von Select sind vollständig kompatibel mit allen Browsern für die Erstellung von Webseiten

Wir wissen, dass die Attribute des Select-Tags in jedem Browser und die Unterstützung jedes Browsers etwas unterschiedlich sind, was dazu führt, dass das Select-Feld in jedem Browser unterschiedlich angezeigt wird. Als Nächstes erstellen wir ein vollständig kompatibles Select, indem wir das Hauptdarstellungs-CSS unterstützen Attribute.
Ich habe Steuervariablen verwendet, um die Höhe, den Abstand und die Zeilenhöhe von „select“ zu steuern, und eine DEMO geschrieben, um drei Situationen in jedem Browser zu testen: height.100.padding.0, height.no.padding.100, no. height.no.padding, die Ergebnisse sind wie im Linkbild jedes Browsers gezeigt DEMO-Erscheinungsbild

Wir können die folgenden Forschungsattribute erhalten.

	ie6	ie7	ie8	ie9	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
Zeilenhöhe	F	F	F	F	F	F	T	F
Texte centré verticalement	T	T	T	F	F	T	T	T

Grâce au résumé ci-dessus des attributs des résultats de recherche, nous savons qu'IE6 a une hauteur fixe de 22 px, quelle que soit la façon dont elle est définie, tandis que d'autres navigateurs, à l'exception de Safari, prennent en charge l'attribut height, nous définissons donc la hauteur : 22 px. Alors maintenant, nous modifions le navigateur Safari, et nous constatons que seul Safari prend en charge l'attribut line-height, nous pouvons donc utiliser line-height pour corriger sa hauteur à 22px, définir line-height: 22px en partant du principe que la taille de la police est 12px, et enfin Le texte dans FF et IE9 n'est pas centré. Définir le remplissage : 2px 0. Nous avons constaté que FF et IE9 sont centrés, mais la hauteur de la sélection dans chaque navigateur n'a pas augmenté. Il y a donc une question ici. Dans le réglage de la hauteur Au cas où le remplissage d'un petit nombre de chiffres n'augmente pas la hauteur totale ?
Ce qui suit est un exemple de code entièrement compatible.

Copier le code

Le code est le suivant :

:// www.w3.org/1999/xhtml">

option>
Question de démonstration trois