Podwójny margines w IE6
Chyba najczęściej spotykany i najprostszy błąd do rozwiązania występujący w IE6. Problem wygląda następująco dla elementów z wartością float IE6 nadaje podwójny margines.
1 2 3 4 5 | #box { width: 500px; float: left; margin: 0 0 0 50px; } |
Zapisanie takiego kodu spowoduje odsunięcie naszego pudełka od lewej o 50px. Jednak po sprawdzeniu w większości przeglądarek okaże się, że kochane IE6 odsunęło nasze pudełko od lewej nie o 50px, a o 100px.
ROZWIĄZANIE
Dość proste, ponieważ float nadaje elementowi automatycznie display: block. My dopiszemy do naszego identyfikatora display: inline co nie zmieni sposobu wyświetlania, a rozwiąże nasz problem w IE6. A więc całość działająca już poprawnie w każdej przeglądarce wygląda tak:
1 2 3 4 5 6 | #box { width: 500px; float: left; margin: 0 0 0 50px; display: inline; } |