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

box-model

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?

źródło: zegarki polar, diety odchudzające, http://medyczny.info/wscieklizna-odzwierzeca-choroba-zakazna/, http://olejekrycynowy.info/olejek-rycynowy-w-medycynie/, ror

Powiązane wpisy:

Powiązane słowa kluczowe:

  • jak oszuka automat

3 Responses to Prosty hack IE czyli jak oszukać IE6?

  1. Puma says:

    Wystarczy poprawny doctype i IE6 w cudowny sposób poprawnie interpretuje box model.

  2. Arek (Skrypta.pl) says:

    Prosze podać przykład

  3. marcin says:

    przyłączam się do prośby Arka.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>