Texto original: http://www.mikkolee.com/13
He estudiado cuidadosamente el atributo de alineación vertical en los últimos días, y el resultado me sorprendió. Este estándar CSS muy experimentado en realidad funciona de manera diferente en cada navegador.
Hay muchos valores para el align vertical, incluido los valores de texto inferior inferior inferior inferior inferior inferior inferior inferior inferior inferior (%, EM, EM, EX, etc.). Déjame mostrarte uno de los valores más exagerados que creo: Bottom. El código es el siguiente:
pag {
tamaño de fuente: 18px;
Línea de altura: 36px;
Font-Family: Tahoma, Sans-Serif;
}
img {
Align vertical: fondo;
}
Luego, echemos un vistazo al efecto de este CSS en varios navegadores (la imagen se hace a propósito, para que pueda ver claramente la posición relativa):
Bueno, este resultado es realmente muy increíble. En general, creo que Firefox lo explicará más correctamente que IE, pero después de mirar la ópera, descubrí que es lo mismo que IE, mientras que Safari/Win está del lado de Firefox. Para ser honesto, no sé qué está pasando.
Estudié cuidadosamente la "Guía CSS autorizada (segunda edición)" e incluso busqué W3C, y luego hice una imagen sobre Vertical-Align solo:
Según W3C, cuando el alinee vertical de un elemento en línea se establece en: línea de base, superior, inferior, la línea de base (o media, superior, inferior) del elemento es la misma posición que los elementos circundantes, como la parte superior de la imagen y la parte superior del texto circundante. Cuando el texto de texto y el fondo de texto son de texto (o abajo) del elemento alinea el texto-top (o el fondo de texto) del elemento circundante. Cuando la longitud (%, EM, EX) se mueve hacia arriba en función de la línea de base, por lo que los números positivos aumentan y los números negativos disminuyen. Cuando está en el medio, el centro del elemento está alineado con el centro del elemento circundante. La definición del centro aquí es: la imagen es, por supuesto, la mitad de la altura, y el texto debe moverse hacia arriba por 0.5EX en función de la línea de base, es decir, el centro de la letra minúscula x . Sin embargo, muchos navegadores a menudo definen la unidad de EX como 0.5em, por lo que no es necesariamente el centro de X (como ejemplo, la altura de X debe ser de 10 px, mientras que EM es 18 px, por lo que los dos valores son diferentes).
Sin embargo, incluso según las pautas anteriores, es increíble que las explicaciones de cada navegador sean muy diferentes. Soy demasiado vago para estudiar por qué este es el caso. En general, deben tener diferentes definiciones de la posición de cada línea en la fuente, por lo que este problema no solo está relacionado con el align vertical, sino también con la explicación del navegador de la estructura del texto en línea y las imágenes en línea.
Finalmente, le daré una página de prueba, y puede echar un vistazo a las explicaciones de diferentes valores de alineación vertical por cada navegador.
http://www.mikkolee.com/weblab/001_vertical/
Puede probar otros valores, como el medio o la cima de texto, que son completamente diferentes de cada navegador. Si tiene alguna experiencia, por favor discúblalo ~~