Antes de começar, vamos ver as funções das propriedades que serão usadas nesse tutorial:
height
define a altura de um elemento
min-height
define a altura mínima para um objeto
O mesmo se aplica a width, porém para a largura e não para a altura.
Problema
Porém o IE, que gosta e complicar a vida dos desenvolvedores, interpreta essas propriedades de forma um pouco diferente:
height é interpretado como altura mínima
min-height é ignorado
Talvez alguém tenha percebido um pequeno erro que existia na home do And After, quando uma publicação aparecia na capa com um resumo muito curto, a publicação que vinha logo após se "amontoava" na de cima. Isso acontecia somente no Internet Explorer por não respeitar a altura mínima da div onde o resumo e a imagem se encontram.
CSS que dava problema no IE
.divresumo {
min-height:150px;
}
No Firefox isso é o suficiente, pois se o conteúdo dentro da div for maior que 150px ela automaticamente terá sua altura aumentada, já que a propriedade height não foi setada. Poderia ser setada como
.divresumo {
min-height:150px;
height: auto;
}
Porém, no IE acontecia o erro já citado.
Solução
Para solucionar este problema no IE seria necessário colocar height:
.divresumo {
height:150px;
}
Aí ele interpretaria como min-height, porém no FF a div ficaria limitada a 150px de altura. Um hack que quebra o comando no IE é feito, deixando que apenas outros navegadores interpretem de forma correta, veja só:
.divresumo {
min-height:150px;
height:150px
}html>body .divresumo {
height: auto;
}
O primeiro bloco é lido por todos os navegadores, setando min-height e height para 150px.
Para permitir que a div tenha mais de 150px também em outro navegadores adicionamos o hack em vermelho, que não será interpretado pelo IE. Assim para os outros navegadores height volta a ter o valor auto.
Pronto, agora a propriedade height:150 fica como resultado final apenas no IE, enquanto nos outros ela assume o valor auto.
Espero que seja útil e tenha ficado bem explicadinho aí…
Deixe um comentário