Internet Explorer 6 min-height hack

Internet Explorer 6 min-height hack

După cum știți, Microsoft a observat, cu mult timp în urmă, că e distractiv (desigur, pentru ei) să nu respecte standardele web. Prin urmare, regulile css min-height / min-width nu funcționează în IE6. Din fericire, în IE7 această problmemă este rezolvată.

Haideți să vedem cum se poate face ceva să meargă și în IE6.

În mod normal, în browsere care respectă într-o măsură mai mare standarde w3, un box cu un width/height specificat, rămâne la dimensiunile respective, conținutul depășind totuși border-ul.

#box {
min-height:100px; /*firefox, opera, ie7 */
height:auto !important; /*firefox, opera, ie7 */
height:100px; /* ie6 */
}

Atât!

Explicația, dacă mai e nevoie:

Prima linie este evident ce face: setează o înălțime minimă de 100px, dar este valabil doar în browserele ce cunosc aceasta regulă;

!important îi „spune” browserului că indiferent de ce definiții urmează pentru regulă, aceasta este ținută minte (desigur, până la următorul !important. Cum Internet Explorer 6 nu știe de !important, linia 3 anulează regula de pe cea de-a doua linie. Dar, faimosul IE6 nu știe nici de height cum trebuie, interpretându-l ca min-height. Adică, dacă este conținut ce depășește înălțimea specificată, div-ul respectiv se mărește. Același „hack” se aplică și pentru width.
Simplu, nu? :)

10 Comentarii

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter