Incompatibilitate CSS intre Firefox si IE6
Majoritatea web designerilor se lovesc de problema compatibilitatii CSS-ului cu Firefox si Internet Explorer 6. Cea mai frecventa problema se intalneste la folosirea proprietatilor padding si margin, care sunt interpretate in mod diferit de IE 6 si alte versiuni mai vechi de browsere, nerespectand standardele impuse de W3C.
Conform standardelor W3C, dimensiunea data de margin, padding si border se adauga la dimensiunea elementului caruia i se aplica respectivele proprietati, lucru pe care IE 6 nu-l respecta, acesta incluzand dimensiunile date de padding si border in dimensiunea elementului, conform imaginii de mai jos.
Am vazut pana acum mai multe metode de a rezolva aceasta problema, dar o voi prezenta pe cea care mi se pare mie cea mai buna.
Sa luam exemplul urmator: un div de 100 pixeli latime, cu padding de 10 pixeli pe toate laturile si border de 5 pixeli. In mod normal (conform W3C) spatiul total ocupat de acest div va fi de 130 pixeli latime (prin cumularea latimii cu dimensiunea padding-ului si a border-ului). Totusi in IE 6 divul va fi redus astfel incat tot spatiul ocupat de acesta sa ramana la 100 de pixeli latime! Acest lucru se transforma intr-un calvar pentru web designeri, care trebuie sa complice mult codul html si css pentru a multumi toate browserele!
div {width:100px; padding:10px; border:5px solid black; margin:10px;}
Acum, care sunt solutiile?
1. * html div {width:130px;}
Aceasta proprietate CSS poate fi interpretata doar de IE6 si versiunile anterioare si declara o noua dimensiune div-ului respectiv, si anume 130px, asfel incat sa corespunda dimensiunii normale afisate de Firefox sau IE7.
2. Sa se foloseasca div-uri suplimentare pentru a separa width de padding si de border!
Astfel in locul unui singur div ce va avea cele trei proprietati se va stabili un div de dimensiune 130px, inca un div cu padding 10px si divul final ce va avea width:100% si border de 5px.
Aceasta metoda este folosita destul de mult de mine deoarece ma fereste de majoritatea incompatibilitatilor si creaza din start un design compatibil.
Etichete: browser, css, firefox, ie, problema, web, web design