Sabemos que las propiedades de la etiqueta Select en cada navegador y el soporte de cada navegador son diferentes, lo que hace que el cuadro de selección Select se muestre de manera diferente en cada navegador. A continuación, creamos una selección totalmente compatible a través del soporte de los atributos CSS de apariencia principal.
Utilicé el método de controlar variables para escribir una demostración para probar tres situaciones en cada navegador: altura.100.padding.0, altura.no.padding.100, No.Height.No.Padding. Los resultados son los siguientes: imágenes de enlace, la aparición de demostración de cada navegador.
Podemos derivar los siguientes atributos de investigación.
IE6 | IE7 | IE8 | IE9 | FF | pez | SF | opción | |
Altura predeterminada | 22px | 22px | 19px | 20px | 19px | 19px | ||
altura | F | T | T | T | T | T | F | T |
relleno | F | F | T | T | T | T | F | T |
altura de la línea | F | F | F | F | F | F | T | F |
Texto centrado verticalmente | T | T | T | F | F | T | T | T |
A través del resumen mencionado anteriormente de los atributos de resultados de la investigación, sabemos que IE6 se fijará en 22 px y sin cambios en cualquier momento, mientras que otros navegadores, excepto Safari, admiten el atributo de altura, por lo que establecemos la altura: 22px. Así que ahora corrigamos el navegador Safari. Descubrimos que solo Safari admite el atributo de altura de línea de línea, por lo que puede usar la altura de línea para corregir su altura a 22 px. Cuando el tamaño de la fuente es 12px, se establece la altura de línea: 22px. Al final, el texto en FF e IE9 no está centrado, y se establece el relleno: 2px 0. Descubrimos que FF e IE9 están centrados, pero la altura de la selección de cada navegador no ha aumentado. Entonces, ¿hay una pequeña duda aquí, bajo la configuración de altura, el acolchado de un pequeño número de números no aumenta la altura total?
A continuación se muestra un ejemplo de código totalmente compatible.
Copiar el código