Les meilleurs préréglages de Select sont entièrement compatibles avec tous les navigateurs select_HTML/Xhtml_Web production de pages

Nous savons que les attributs de la balise select dans chaque navigateur et la prise en charge de chaque navigateur sont quelque peu différents, ce qui entraîne un affichage différent de la zone de sélection dans chaque navigateur. Ensuite, nous créerons une sélection entièrement compatible en prenant en charge le CSS d'apparence principale. attributs.
J'ai utilisé des variables de contrôle pour contrôler la hauteur, le remplissage et la hauteur de ligne de sélection et j'ai écrit une DÉMO pour tester trois situations sur chaque navigateur : height.100.padding.0, height.no.padding.100, no. height.no.padding, les résultats sont tels qu'indiqués dans l'image du lien de chaque navigateur Apparence DEMO

Nous pouvons obtenir les attributs de recherche suivants.

	ie6	ie7	ie8	ie9	ff	ch	sf	op
Hauteur par défaut	22px	22px			19px	20px	19px	19px
hauteur	F	T	T	T	T	T	F	T
rembourrage	F	F	T	T	T	T	F	T
hauteur de ligne	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