Análisis detallado del atributo de alineación vertical En los últimos días, estudié cuidadosamente el atributo de alineación vertical. El resultado me sorprendió. Este estándar CSS muy "senior" en realidad se comporta de manera diferente en varios navegadores.
Hay muchos valores para la alineación vertical, incluida la línea de base, el texto superior, el texto superior, el texto inferior, el medio y varios valores de longitud (%, em, ex, etc.). Permítanme mostrarles primero un valor que creo que es el más exagerado: fondo. El código es el siguiente:
Código fuente de ejemplo
[www.52css.com] pag {
tamaño de fuente: 18px;
altura de línea: 36px;
familia de fuentes: Tahoma, sans-serif;
}
imagen {
alineación vertical: abajo;
}
Luego, observe el efecto de este CSS en varios navegadores (la imagen está hecha deliberadamente así, para que la posición relativa se pueda ver claramente):
Bueno, este resultado es realmente muy sorprendente. En general, creo que Firefox lo explicaría más correctamente que IE, pero después de mirar Opera, 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é detenidamente la "Guía definitiva de CSS (segunda edición)", e incluso consulté el W3C, y luego hice un diagrama sobre la alineación vertical:
Según la definición del W3C, cuando la alineación vertical de un elemento en línea se establece en:
1. Cuando se utilizan línea de base, superior e inferior, la línea de base (o media, superior, inferior) del elemento está alineada con la misma posición de los elementos circundantes, como la parte superior de la imagen y la parte superior del texto circundante.
2. Cuando se utilizan texto superior y texto inferior, la parte superior (o inferior) del elemento se alinea con el texto superior (o texto inferior) de los elementos circundantes.
3. La longitud (%, em, ex) se mueve hacia arriba según la línea de base, por lo que los números positivos aumentan y los negativos disminuyen.
4. Cuando está en el medio, el centro del elemento está alineado con el centro de los elementos circundantes. La definición de "centro" aquí es: la imagen tiene, por supuesto, la mitad de la altura y el texto debe moverse hacia arriba 0,5 ex según la línea de base, que es el centro exacto de la letra minúscula "x". Sin embargo, muchos navegadores suelen definir la unidad de ex como 0,5 em, por lo que no es necesariamente el centro exacto de x (por ejemplo, en la imagen de arriba, la altura de x debe ser 10 px y em es 18 px, por lo que los dos los valores son diferentes).
Sin embargo, incluso siguiendo las pautas anteriores, me sorprende que los navegadores interpreten las cosas de manera tan diferente. Soy demasiado vago para investigar por qué es así. En términos generales, debería ser que tienen diferentes definiciones de la posición de cada línea de la fuente, por lo que este problema no solo está relacionado con la alineación vertical, sino también con la interpretación del navegador de la estructura del texto en línea y las imágenes en línea. tiene mucho que ver con eso.
