Parte do meu trabalho é fazer com que as interfaces do usuário tenham uma boa aparência de vez em quando. Saiba que as diferenças de renderização do navegador acabarão me causando uma úlcera induzida por estresse. Tudo bem, aceitei … Vamos em frente. Embora eu (normalmente) não precise mais fazer o IE7 parecer igual a outros navegadores, posso testemunhar que ainda existem algumas diferenças frustrantes entre os navegadores modernos que vão assombrar seus sonhos, mesmo com Normalize.css lá para protegê-lo.
Felizmente, existem pequenas dicas (não hacks, dicas) que você deve saber e que tornarão sua vida muito mais fácil. Estou prestes a informá-lo sobre algumas informações que podem salvar vidas sobre os valores rem.
valores rem
Se você não sabe, os remvalores são relativos ao tamanho da fonte do elemento raiz (html), os emvalores são relativos ao tamanho da fonte do pai. (rem value) = (desired px value) / (root font size)
16px é o tamanho da fonte raiz para todos os navegadores. Você pode sobrescrever isso alterando o tamanho da fonte no elemento html do seu css.
Digamos que você deseja definir a fonte base e a linha de base para a página inteira. Você deseja que o tamanho da fonte seja 20px e a altura da linha seja 30px. Além disso, você deseja usar os valores ‘rem’ em vez de ‘px’ porque se preocupa com as preferências do usuário, acessibilidade e não há nenhuma maneira de usá-los.
Isso é legal, você provavelmente escreveria seu código assim:
html {
/* Root font size at this point is 16px. 1rem = 16px
* overwrite it here to 20px so later 1rem = 20px;
*/
font-size: 1.25rem; /* 20px / 16px = 1.125 */
line-height: 1.875rem; /* = 30px / 16px = 1.875 */
}
p {
/* Root font-size was changed to 20px above*/
font-size: 0.75rem; /* 15px / 20px = 0.75 */
}Meu amigo, eu te enganei.
Você vê, você sobrescreveu o tamanho da fonte raiz, mas e quanto à altura da linha? Você definiu isso para 1.875 rem. No momento da renderização, ele pensa em 1rem = 16px (tamanho da fonte padrão) ou 20px (tamanho da fonte substituído)? Boa pergunta, depende de qual navegador você está perguntando. O Firefox dirá que a altura da sua linha é 37,5px (20px * 1,875), enquanto o Chrome dirá 30px (16px * 1,875). Essa é uma diferença muito grande, especialmente quando se trata de alturas de linha.
Qual navegador está correto? Não importa. O que importa é como evitar esse problema.
A ponta
Não coloque nenhum atributo, exceto no estilo html !!font-size
Se, em vez disso, você declarar os estilos de todo o site no elemento body, pode ter certeza de que o tamanho da fonte raiz já terá sido substituído. Por exemplo, o código a seguir fornecerá a você um tamanho de fonte para todo o site de 20px e uma altura de linha de 30px usando os bons e velhos rems em todos os navegadores modernos!
html {
font-size: 1.25rem; /* 20px / 16px = 1.125 */
}
body {
line-height: 1.5rem; /* 30px / 20px = 1.5 */
}
p {
font-size: 0.75rem; /* 15px / 20px = 0.75 */
}Ta da!
Não acredita em mim? Não sei por que você não faria isso, mas apenas no caso, fiz alguns violinos para você.
Fiddle # 1 – parece diferente no Firefox / chrome
Fiddle # 2 – parece o mesmo no Firefox / Chrome