21
Mar
[css] min-height hack
Hacks são necessários, mas sujar o html realmente não me deixa satisfeito. E um dos muitos problemas que nosso amigo IE(ca)6 tem com CSS é a propriedade min-height
. Simplesmente não está implementada. Mesmo porque para o IE, o comportamento que deveria ser seguido com min-height
é o padrão para qualquer elemento com uma height
definida (graças á implementação incorreta da propriedade overflow
…).
Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Funciona assim: o IE6 tambem não implementa corretamente a declaração !important
, e vai sobrescrever a declaração de height:auto
com height:500px
, “emulando” a propriedade min-height:500px
. Todos os browsers modernos vão seguir a declaração height:auto !important
, mantendo min-height:500px
à salvo. Nasty.
A brincadeira funciona no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2. Nada de IE5.x, infelizmente. (quem liga? eu com certeza não! :P)
Eu enfrentei o mesmo problema com o IE6, mas a solução foi bem mais simples do que a solução dada pelo Dustin Diaz (que no meu caso não resolveu!)…
#content
{
_height: 280px; /* para o ieca 6 */
min-height: 280px; /* outros browsers */
}
Eu só adicionei um _ no início da propriedade height para ela funfar direitinho… Testei no ica6 e 7, ff 3 e opera, e todos funfaram perfeitamente…
Obrigado Joel! Da próxima vez que eu tiver de aplicar min-height em algum layout, vou lembrar da sua dica.