Principalul scop pentru care am scris acest articol este de a-i scuti pe alţi developeri de nervi consumaţi inutil sau de pierdut timpul (foarte util) cu bug-ul de Internet Explorer (IE 6) pe care l-am descoperit.
Pentru a-mi atinge scopul trebuia să găsesc o denumire pentru articol astfel încât să poată fi găsit cât mai uşor. De aceea am folosit titlul de IE 6 drop float … 3px extra margin. Explicaţia e simplă: cam asta am căutat eu pe Google atunci când am dat de problemă, dar fără succes. Am găsit doar alte bug-uri legate de spaţii extra de 3px.
Să trecem la fapte…
Bug-ul se manifestă în următoarele condiţii:
– există un div container cu nişte a-uri în el
– a-urile au float: left
– a-urile conţin img-uri
[HTML]
[/HTML]
Totul se potriveşte la fix, atâta doar că pe IE nu se întâmplă aşa, ci ultimul a din rând cade pe rândul următor. Manifestarea e şi mai caraghioasă dacă sunt mai multe rânduri. Div-ul container ar trebui să fie cu încă 3px mai lat ca să fie ok şi în IE.
Soluţia e una foarte simplă, dar şi fără explicaţie pentru că am găsit-o întâmplător (ca toate lucrurile bune care se respectă): a-urile sa aibă background-color.
O altă soluţie ar fi ca ultimul a din rând să aibă un margin-right: -3px, dar în acest caz am observat alte diferenţe faţă de restul browserelor, în sensul că dispare margin-ul bottom pe care îl aveau a-urile din ultimul rând (în IE orice se poate).
INCREDIBIL?! E adevărat!
Mircea Fernea
[Dacă doriţi să publicaţi şi Dvs articole pe acest sit contactaţi-ne. Ne-am bucura şi am fi onoraţi. Acceptăm guest posts în anumite condiţii.]
Se încarcă...
Cred ca solutia mai simpla ar fi fost, mai degraba, ca a-urile sa aiba „display: inline;” pe ele. De altfel, solutia asta se aplica pt majoritatea bug-urile aparute in urma float in IE6.
Mai puteai folosi si Js pentru a remedia situtia.
Sau sa suprascrii proprietatile doar pe ie6 cu _ in fata proprietatii:
Ex:
.container a{
margin-left : 10px;
_margin-left : 20px;
}
float left + margin left nu dubleaza marginea in IE? Google „double margin float bug IE”.
Ok, e vorba de asta de fapt: http://www.cssplay.co.uk/ie/3pxbug.html
Va multumesc tuturor pentru sugestii!
Vreau sa fac cateva precizari:
– left margin-ul e exact cat ar trebui sa fie, deci problema nu e generata de dublarea marginii.
– display: inline nu rezolva problema in cazul asta.
– float: left + margin-left: …px intr-adevar ar trebui sa dubleze left margin-ul pe IE, si se rezolva cu display: inline.
Bug-ul se poate manifesta si daca float-ul si marginea nu sunt in aceeasi directie (am vazut cazuri).
– bug-ul de pe cssplay desi are probleme cu aceiasi 3px are un alt scenariu si din cate vad o rezolvare ceva mai complicata. Am vazut si alte buguri care se loveau de aceiasi 3px dar rezolvarile erau altele si nu se potriveau si in cazul meu.
Spor la toate!