FireFox 3-linha de altura

Question

O Firefox 3 introduziu um novo comportamento em que line-height, quando desactivado, difere de como outros navegadores processá-lo. Assim, uma seção crítica talvez tornar muito alto nesse browser. A definição de um percentual global não funciona, desde a sua base é diferente. Definir um valor sem unidade, como "1" não quer trabalhar. Existe alguma maneira para normalizar esta dimensão?

Answer 1

O valor calculado de line-height: normal varia entre plataformas, navegadores (e diferentes versões do mesmo navegador, como você estado), fontes e até mesmo tamanhos diferentes da mesma fonte (veja o artigo de Eric Meyer) .

A definição de um valor sem unidade, como ...

body {line-height: 1.2;}

... deve trabalho para normalizar o espaçamento entre os navegadores. Se isso não está funcionando, você pode fornecer uma descrição mais detalhada do seu estilo?

É difícil (impossível?) Para obter resultados "de pixel-perfect", mas a fim de obter resultados que são tão previsível quanto possível, eu tento usar uma altura da linha que produz um valor redonda bom quando multiplicado pelo Fonte- Tamanho. Não podemos saber o tamanho da fonte padrão do agente do usuário, mas 16 pixels é um pouco comum.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

Se começar o tamanho da fonte do agente de usuário é realmente 16 pixels, em seguida, a altura da linha de 1.5 sai para um agradável, mesmo 24 pixels. Os usuários podem fazer e mudar o tamanho da fonte padrão ou o zoom de página, porém, e navegadores diferentes têm diferentes métodos de dimensionamento da página. No entanto, eu acho que tive sucesso razoável para a maioria dos usuários. Se eu não puder fazer a altura da linha sair exatamente, shoot então eu para um pouco acima do número inteiro, em vez de um pouco abaixo, porque alguns navegadores parecem valores Truncar em vez de em volta deles.

Além disso, observe que se você usar uma porcentagem para a altura da linha, ele se comporta de forma diferente quando o valor é herdado.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

A partir de um tamanho da fonte base de 16 pixels, a altura da linha será de 24 pixels. Dentro de um elemento <p> o tamanho da fonte torna-se 12 pixels, mas a altura da linha faz não se tornar 18 pixels, em vez disso, permanece 24 pixels. Esta é a diferença entre line-height: 1.5 e line-height: 150%. Quando body {line-height: 1.5;} é usado, a altura da linha para <p> é 18 pixels.

Answer 2

Não há absolutamente nada que possa fazer. Cada navegador tem lá a maneira de CSS renderização e conteúdo. Você pode usar um reset "Master" (como deus vaca sugere), mas mesmo assim, isso não está indo finalmente para corrigir os problemas de alinhamento. Eles estão lá por causa do motor de renderização real. Maçã do CSS para o seu site existente e testá-lo. Diga-me se faz Pixel Perfect através da placa. Ele não vai.

A única maneira de realmente atingir a perfeição do pixel é implementar CSS específico para navegadores específicos. Mozilla tem a @ -moz-doc , IE tem seu próprio hacks , mas nenhum deles é parte das especificações do W3C, e todos nós sabemos que são normas importante. Portanto, não muito de uma opção.

Como David disse acima, é difícil. Estou inclinado a pensar impossível na verdade. E eu gastei horas tentando, confie em mim! Quase fui mais vezes loucos do que eu gostaria de contar. É uma pílula difícil de engolir, mas simplesmente não há maneira de contornar isso, a menos que todos usavam o mesmo motor de navegação (o que realmente levar a internet um grande salto em frente na minha opinião). Quer dizer, não seria tão difícil de tapa qualquer que seja a interface que você quer em seu navegador, desde que você plug-in [gecko] [webkit] [presto] [Trident] [seja qual for] para lidar com o back-end ... Desde o bem aqueles são todos de código aberto, você pode mesclar os projetos e realmente ir. As pessoas precisam aprender a jogar bonito juntos;)

Answer 3

Você pode resolver isso:

Set altura da linha 1, então zero no seu texto usando padding-top e padding-bottom e altura definida como Auto.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
} 

Answer 4

Você deve sempre "reset" estilos para eliminar todas as inconsistências do browser com estilos de elemento.

Gosto Eric Meyer CSS Repor . Yahoo tem um também.