IE 6 drop float … 3px extra margin


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.]


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

5 comentarii

  1. Viorel Sfetea spune:

    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.

  2. 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;
    }

  3. Dever spune:

    float left + margin left nu dubleaza marginea in IE? Google „double margin float bug IE”.

  4. Mircea Fernea spune:

    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!


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *