Texto original: http://www.mikkolee.com/13
Estudei cuidadosamente o atributo de alinhamento vertical nos últimos dias, e o resultado me surpreendeu. Esse padrão CSS muito experiente realmente tem um desempenho diferente em cada navegador.
Existem muitos valores para o alinhamento vertical, incluindo a submarina de texto submarino de base de texto no fundo do texto de texto inferior e vários valores de comprimento (%, em, ex, etc.). Deixe -me mostrar a você um dos valores mais exagerados, acho: Bottom. O código é o seguinte:
P {
Size da fonte: 18px;
altura de linha: 36px;
Font-Family: Tahoma, Sans-Serif;
}
img {
Alinhamento vertical: inferior;
}
Então, vamos dar uma olhada no efeito deste CSS em vários navegadores (a imagem é feita de propósito, para que eu possa ver claramente a posição relativa):
Bem, esse resultado é realmente muito incrível. Geralmente, acho que o Firefox explicará mais corretamente do que o IE, mas depois de olhar para a ópera, descobri que é o mesmo do IE, enquanto o Safari/Win está do lado do Firefox. Para ser sincero, não sei o que está acontecendo.
Estudei cuidadosamente o "Guia CSS autoritário (segunda edição)" e até procurei o W3C, e depois fiz uma imagem sobre alinhamento vertical por mim:
De acordo com o W3C, quando o alinhamento vertical de um elemento embutido é definido como: linha de base, superior, inferior, linha de base (ou médio, superior, inferior) do elemento é a mesma posição que os elementos circundantes, como a parte superior da imagem e a parte superior do texto circundante. Quando o texto e o fundo de texto são o texto (ou inferior) do elemento alinham o texto (ou fundo de texto) do elemento circundante. Quando o comprimento (%, em, ex), ele se move com base na linha de base, para que números positivos aumentem e os números negativos diminuam. Quando o meio, o centro do elemento está alinhado com o centro do elemento circundante. A definição do centro aqui é: a imagem é obviamente metade da altura e o texto deve ser movido em 0,5EX com base na linha de base, ou seja, o centro da letra minúscula x . No entanto, muitos navegadores geralmente definem a unidade de EX como 0.5EM, portanto, não é necessariamente o centro de x (como exemplo, a altura de x deve ser de 10px, enquanto em 18px, portanto os dois valores são diferentes).
No entanto, mesmo de acordo com as diretrizes acima, é incrível que as explicações de cada navegador sejam tão diferentes. Estou com preguiça de estudar por que esse é o caso. Em geral, eles devem ter definições diferentes da posição de cada linha na fonte; portanto, esse problema não está apenas relacionado ao alinhamento vertical, mas também à explicação do navegador sobre a estrutura do texto embutido e das imagens embutidas.
Por fim, darei a você uma página de teste e você pode dar uma olhada nas explicações de diferentes valores de alinhamento vertical por cada navegador.
http://www.mikkolee.com/weblab/001_vertical/
Você pode testar outros valores, como o meio ou o texto, que são completamente diferentes de cada navegador. Se você tiver alguma experiência, discuta isso ~~