CSS cross-browser: cum implementezi proprietatea min-height în versiunile vechi de Internet Explorer

În crearea machetelor web, una dintre cerințele frecvente este setarea unei înălțimi minime pentru un container sau bloc de conținut, astfel încât designul să își păstreze proporțiile chiar și atunci când textul este scurt, dar să se extindă flexibil dacă se adaugă mai mult conținut.

Proprietatea standard min-height rezolvă impecabil această problemă în browserele moderne. Totuși, în istoria dezvoltării web, versiunile vechi de Internet Explorer (în special IE6) nu suportau proprietatea min-height, deși interpretau în mod paradoxal proprietatea standard height ca pe o înălțime minimă, permițând casetei să crească dacă volumul de conținut depășea dimensiunea setată.

Soluția CSS cross-browser clasică

Pentru a împăca specificațiile CSS standard cu particularitățile din Internet Explorer 6 și versiunile vechi, dezvoltatorii au recurs la o combinație celebră de reguli !important și selectorul de tip hack * html (cunoscut sub numele de Star HTML Bug):

/* Reguli pentru browsere standard (Firefox, Chrome, Safari, Opera) */
.container {
  min-height: 8em;
  height: auto !important;
}

/* Hack specific pentru Internet Explorer 6 */
/*\*/
* html .container {
  height: 8em;
}
/**/

Cum funcționează această tehnică?

• Pentru browserele conforme cu standardele: Proprietatea min-height: 8em; stabilește limita inferioară, iar height: auto !important; garantează că înălțimea se va adapta conținutului și că această instrucțiune are prioritate maximă.
• Pentru Internet Explorer 6: Deoarece IE6 nu cunoștea min-height și avea o eroare de interpretare a selectorului * html (considera că există un element părinte deasupra tagului <html>), doar el citea blocul respectiv și aplica height: 8em;, care se comporta nativ exact ca o înălțime minimă.

Această soluție reprezintă un exemplu clasic de ingeniozitate în era de aur a hacks-urilor CSS, asigurând compatibilitate completă și o redare uniformă fără a depinde de scripturi JavaScript.