Prosty hack IE czyli jak oszukać IE6?

Pozycjonowanie elementów w strukturze DOM bywa irytujące. Problem testowania stron pod kątem kilku przeglądarek to codzienność dla wielu webmasterów, a dla tych którzy robią to zawodowo niestety konieczność.

Wielokrotnie spotkałem się z opinią aby ignorować IE6 i budować strony wyłącznie zgodne z IE7, IE8, Safari, Firefox, Opera i Chrome ale nie do końca mogę się tą opinią zgodzić. To po prostu nie wypada aby profesjonalna firma zajmująca się webmasterką nie potrafiła sobie poradzić z IE6, szczególnie gdy udział IE6 w rynku sięga ciągle 20%. Dla naszego klienta, właśnie ta grupa 20% może być potencjalną grupą odbiorców i dlatego właśnie klienta nie za bardzo interesuje, że nasz kod będzie trochę bardziej brzydszy niż ładny i schludny CSS2. A więc zaczynajmy.

Jak projektować strukturę dokumentu aby nie mieć problemu z atrybutami WIDTH i HEIGHT pod IE6?

• używaj tak zwanych reset.css, które zerują początkowe ustawienia kluczowych elementów, to tylko kilka dodatkowych bajtów które zostaną i tak w cache’u przeglądarki
• w głównym szkielecie strony używaj wyłącznie elementów DIV
• nie umieszczaj DIV obok elementu P
• jeśli tylko możliwe, przypisuj margin, padding, display i border do każdego elementu DIV
• unikaj stosowania margin i padding jako odstepów pomiędzy kluczowymi częściami
• jeśli użyjesz float w jednym elemencie, użyj go w każdym w strukturze

Przykład szkieletu w CSS2:

<div id="kontener" style="margin: 10px; padding: 10px; float: left; width: 800px;">
<div id="menu" style="margin: 0pt 0pt 20px; float: left; width: 180px;">...</div>
<div id="tresc" style="margin: 0pt 0pt 20px; float: left; width: 580px;">........</div>
</div>

Powyższy kod pod IE6 rozjedzie się poza 800px i spowoduje, że DIV o id=tresc zostanie wypchnięty poniżej menu.
Poniżej trochę innych zapis tej samej struktury zachowującej 20px odstępy pomiędzy treścią i menu.

<div id="kontener" style="margin: 0pt; padding: 0pt; float: left; width: 800px;">
<div id="menu" style="margin: 0pt; padding: 0pt; float: left; width: 180px;">...</div>
<div id="tresc" style="margin: 0pt; padding: 0pt; float: left; width: 580px;">........</div>
</div>

[ad#post]Zauważ, że wyzerowaliśmy margin oraz padding a zamiast tych atrybutów pojawił się dodatkowy DIV jako sztuczny margines. IE6 ułoży poprawnie elementy na stronie i poukłada je „do lewej” tak długo jak długo wszystkie elementy będą miały padding i margin równy zero i każdy z nich będzie miał przypisany WIDTH, a suma wszystkich WIDTH będzie mniejsza lub równa 800px. Dobrym zwyczajem jest również przypisywać na sztywno HEIGHT o ile to możliwe i określać atrybut DISPLAY jako BLOCK. Od tego momentu wszystkie przeglądarki będą poprawnie i jednolicie wyświetlać strukturę.

Wady tego rozwiązania?

Na pewno nie wykorzystujemy możliwości CSS2 i to nie podlega dyskusji. Na pewno łatanie kodu w ten sposób powoduje pojawienie się kilku zbędnych elementów w kodzie i powoduje, że struktura jest mniej czytelna niż przy użyciu MARGIN i PADDING. Należy jednak zauważyć, że kod który tworzymy jest dalej zgodny ze standardem W3C i poprawnie przechodzi walidację! Stosowanie takiej struktury nie ogranicza nas również w żaden sposób wewnątrz struktury elementów „menu” i „tresc”, ponieważ mając stabilną strukturę główną dokumentu, możemy dowolnie układać elementu wewnętrznie manipulując odpowiednim atrybutem WIDTH i TEXT-ALIGN.

Należy sobie zadać pytanie, co jest ważniejsze, wygodne podejście webmastera czy zwiększenie współczynnika konwersji na stronie poprzez poprawne obsłużenie 20% użytkowników więcej?