O texto tem tamanhos diferentes em plataformas diferentes

Question

Como obtenho um tamanho preciso em diferentes plataformas, se cada plataforma renderiza o texto em um tamanho diferente? Esse problema foi agravado com o lançamento recente do Firefox 4 . Esta versão permite a renderização de texto por hardware usando DirectWrite . O tamanho do texto escrito com DirectWrite é muito maior do que o texto escrito sem aceleração de hardware. Observe o seguinte exemplo. Aqui está o exemplo ao vivo se você precisar ver o CSS.

• Página inicial do Windows 7 de 64 bits
• ATI Radeon HD 4670
• DirectWrite está desativado porque meus drivers não são atualizados.
• 620 x 283

• Windows Vista 64 bits para empresas
• nVidia GeForce 8800GT
• DirectWrite está ativado porque acabei de atualizar meus drivers.
• 620 x 293

HTML

<ul>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
</ul>
<div>
 Content
</div>

CSS

ul {
 float: left;
 width: 10em;
}

div {
 margin: 0 0 0 12.7em;
 min-height: 26.1em;
} 

Você vê como a navegação se alinha com o conteúdo quando o DirectWrite está desativado, mas a navegação é mais alta do que o conteúdo quando o DirectWrite está ativado? Eu sei que existem algumas soluções hacky. Uma é especificar tudo (font-size, width, height) em px. Isso não é ideal porque o componente não será modular - ou seja, não pode ser reutilizado em outra configuração dimensionada para outro tamanho. Ele também quebra as opções de tamanho de fonte do IE6. Outra solução é usar JavaScript para ler a altura física da navegação e tornar o conteúdo da mesma altura. Isso não é ideal porque é função do CSS definir o estilo. Existe alguma solução CSS para isso?

Este é apenas um de muitos exemplos. Outro é o Firefox 3 no Ubuntu 9 tem um texto muito mais amplo, portanto, nem todos os links cabem na minha navegação primária. Fui forçado a cortar o último link de navegação com max-width: 37em; overflow: hidden.

Answer 1

Minha resposta honesta é que você precisa lidar com diferentes tamanhos de fonte.Sua melhor aposta é não alinhar a altura do conteúdo usando min-height: 26.1em, pois é "hacky".Eu sugiro reestruturar seu HTML para que o UL esteja dentro do DIV e o resultado final sempre corresponda.

Sem isso, você pode definir ul li { line-height: 1em } ou similar, o que tornará os LIs sempre da mesma altura.

Answer 2

Eu não me preocuparia com isso.Eles são entidades essencialmente diferentes e o conteúdo não é fixo de qualquer maneira, como você disse, ele se expandirá se você clicar em "Opções avançadas".Acho que parece bom ir um pouco mais, como se isso fosse deixar você saber que não é um limite fixo.
Aqui está uma ideia.Se você quiser mantê-lo fixo, pode embrulhar tudo isso dentro de um DIV de contêiner e usar isso para definir suas bordas.Em seguida, use a rolagem de estouro com o conteúdo quando ele se expandir para fora do DIV do contêiner.Contanto que seja vertical, não deve ser muito incômodo