Efeito no IE
Efeitos no Mozilla Firefox
Isso é causado por um bug na interpretação da distância entre as caixas do IE (consulte "Problemas com modelos flutuantes" do onestab). Nunca resolvi esse problema até traduzir "Tabela vs. CSS - Uma Batalha de Vida e Morte". Uma dica do autor me ajudou a encontrar uma solução: use !important.
!important é uma sintaxe definida em CSS1. Sua função é aumentar a prioridade de aplicação de regras de estilo especificadas (ver: explicação do W3.org). O formato de sintaxe { sRule!important } é escrito no final da definição, por exemplo:
caixa{cor:vermelho !importante;}
O ponto mais importante é: o IE nunca suportou essa sintaxe, mas outros navegadores sim. Portanto, podemos usar isso para definir estilos diferentes para o IE e outros navegadores. Por exemplo, definimos um estilo como este:
.colortest {
borda: 20px sólido #60A179 !importante;
borda: 20px sólido #00F;
preenchimento: 30px;
largura: 300px;
}
Ao navegar no Mozilla, você pode entender a prioridade de !important, então a cor #60A179 é exibida:
Ao navegar no IE, a prioridade de !important não é compreendida, então a cor #00F é exibida:
Como você pode ver, usando !important, podemos definir estilos diferentes para navegadores IE e não-IE, basta adicionar !important após o estilo de navegador não-IE. Portanto, a diferença de exibição de 2px na minha página inicial mencionada acima pode ser facilmente resolvida:
PADDING-TOP: 11px !importante;
PADDING-TOP: 9px;
!important definitivamente se tornará uma ferramenta poderosa para layout CSS, lembre-se e domine-a :)
