Análise detalhada do atributo vertical-align Nos últimos dias, estudei cuidadosamente o atributo vertical-align. O resultado me surpreendeu. Esse padrão CSS muito "sênior" na verdade se comporta de maneira diferente em vários navegadores.
Existem muitos valores para alinhamento vertical, incluindo linha de base sub ceia texto superior inferior texto inferior médio e vários valores de comprimento (%, em, ex, etc.). Deixe-me primeiro mostrar um valor que considero o mais exagerado: o fundo. O código é o seguinte:
Exemplo de código-fonte
[www.52css.com] p {
tamanho da fonte: 18px;
altura da linha: 36px;
família de fontes: Tahoma, sem serifa;
}
imagem {
alinhamento vertical: inferior;
}
Então dê uma olhada no efeito deste CSS em vários navegadores (a imagem é feita deliberadamente assim, para que a posição relativa possa ser vista claramente):
Bem, esse resultado é realmente muito surpreendente. Geralmente, eu acho que o Firefox explicaria isso mais corretamente do que o IE, mas depois de olhar para o Opera, descobri que é igual ao IE, enquanto o Safari/Win está do lado do Firefox. . Para ser sincero, não sei o que está acontecendo.
Estudei cuidadosamente o "Guia Definitivo CSS (Segunda Edição)", e até consultei o W3C, e então fiz um diagrama sobre alinhamento vertical:
De acordo com a definição do W3C, quando o alinhamento vertical de um elemento inline é definido como:
1. Ao usar linha de base, superior e inferior, a linha de base (ou meio, superior, inferior) do elemento é alinhada com a mesma posição dos elementos circundantes, como a parte superior da imagem e a parte superior do texto circundante.
2. Quando texto superior e texto inferior são usados, a parte superior (ou inferior) do elemento é alinhada com a parte superior do texto (ou parte inferior do texto) dos elementos circundantes.
3. O comprimento (%, em, ex) é movido para cima com base na linha de base, de modo que os números positivos sobem e os números negativos descem.
4. Quando estiver no meio, o centro do elemento está alinhado com o centro dos elementos circundantes. A definição de "centro" aqui é: a imagem tem, obviamente, metade da altura e o texto deve ser movido 0,5ex para cima com base na linha de base, que é o centro exato da letra minúscula "x". No entanto, muitos navegadores geralmente definem a unidade de ex como 0,5em, de modo que não é necessariamente o centro exato de x (por exemplo, na imagem acima, a altura de x deve ser 10px e em é 18px, então os dois os valores são diferentes).
No entanto, mesmo seguindo as diretrizes acima, fico perplexo com o fato de os navegadores interpretarem as coisas de maneira tão diferente. Estou com preguiça de pesquisar por que esse é o caso. De modo geral, deve ser que eles tenham definições diferentes da posição de cada linha da fonte, portanto esse problema não está relacionado apenas ao alinhamento vertical, mas também à interpretação do navegador da estrutura do texto e das imagens embutidas. tem muito a ver com isso.
