Poniżej przedstawiam trzy błędy które można spotkać na codzień w ulubionej przeglądarce weddeveloperów Internet Explorer 6.

Zwiększenie marginesów 2 krotnie

Często spotykany bug. Elementy  które posiadają właściwość float: left/right i margines boczny. W tym momencie dochodzi do dziwnej sytuacji, IE zwiększa margines 2 krotnie, możne to prowadzić do prawdziwej katastrofy jeśli cały design strony budowany jest za pomocą float-ów.

Poniżej przykład, z lewej strony możemy zobaczyć jak to zinterpretowało IE, a z prawej przykład jak to widzi Opera.

Blok zaprezentowany powyżej miał taki styl:

#box {
    float: left;
    width: 100px;
    height: 100px;
    background: #fff;
    margin: 10px;
}

Trudno powiedzieć dlaczego się tak dzieje. Naszczęscie istnieje banalny sposób na rozwiązanie tego błędu – wystarczy dodać właściwośc display: inline do elementu (Nadal pozostanie elementem blokowym mimo display: inline, w każdej przeglądarce.)

Height: 1px

Internet Explorer w całej swej mądrości nie pozwala utrudnia na utworzenie elementów o wysokości 1,2,3,5px, w prosty sposób.  Spowodowane jest to tym że IE rezerwuje sobie wysokość równej +/- wysokości czcionki która jest ustawiona dla danego elementu lub dziedziczona.

Przykład:

Nic nam nie da ustawienie wysokości elementu na font-size: 0px; gdyż otrzymamy element o wysokości 2px :) Pomaga dodanie właściwości overflow: hidden; wtedy otrzymujemy element o wysokości 1px;.

Odstęp na listach

Stwórzmy sobie takie menu:

<ul>
	<li><a>link</a></li>
	<li><a>link2</a></li>
</ul>

Oraz taki styl

ul {
    list-style: none;
}
ul li a {
    display: block;
    background: red;
}

Efekt takiego kodu będzie taki:

To co widzimy po lewej stronie to radosna interpretacji naszego kodu wykonana przez IE.
Pozbyć się tych odstępów można na dwa sposoby:

• Usunąc białe znaki między  </li> i <li>
• Do ul li a, dodać właściwość zoom:1

W przyszłości postaram się opisać kolejne ciekawe bugi jakie można spotkać w IE.