 |
| Internet Explorer |
W poprzedniej części przekazałem informacje na temat tricków / hacków pod Internet Explorer, które w szybki sposób mogą pomóc w problemie błędnego wyświetlania elementów na stronie. Jest to podejście doraźne, raczej nie polecane. Znacznie lepszym rozwiązaniem jest tworzenie wspólnego kodu html/css dla wszystkich przeglądarek.
Gdy jesteśmy w trakcie tworzenia strony internetowej możemy odrazu zwracać uwagę na efekty naszej pracy w wszystkich przeglądarkach lub trzymać się pewnych określonych schematów w szablonach css.
Najnowsze wersje Internet Explorer (IE 11), są już na tyle dopracowane, że możemy przyjąć poprawność i zbieżność interpretacji kodu html i css w przeglądarkach Firefoxa, chroma i explorera. Jednakże istnieje duże grono użytkowników korzystających z starszych wersji przeglądarek w tym IE8i z tego względu należy wsiąść pod uwagę tą odsłonę IE.
Dziś skupie się na elementach blokowych na stronie i ich pozycjonowaniu w kaskadowym arkuszu styli.
1. Znaczenie ważności elementów blokowych względem siebie.
Jeżeli używamy akapitów nie zagnieżdżajmy akapit w akapicie czyli przykładowy kod:
<p class="first_p">
<p class="content_1">
Akapit kontener nr 1. Lorem Ipsum ...
</p>
</p>
jest nieprawidłowy pod względem semantycznym. Zauważyłem, że IE nie lubi takich struktur i błędnie (albo i bezbłędnie wytyka nam błędy) je interpretuje. Poprawnie było by opakowanie naszego akapitu divem, który znaczeniowo jest ważniejszy. Czyli można byłoby powyższy kod przedstawić następująco:
<div class="first_container">
<p class="content_1">
Akapit kontener nr 1. Lorem Ipsum ...
</p>
</div>2. Trzymanie się konwencji.
Kolejną poradą jest trzymanie się pewnego schematu przy tworzeniu i pozycjonowaniu elementów blokowych na stronie. Pamiętajmy o możliwości opakowywania poszczególnych elementów, nadawania im określonych rozmiarów (własność width i height) oraz możliwością sterowania pozycją poprzez padding i margin. Opakowania znacznie uproszczają kontrolę nad poszczególnymi elementami HTML oraz wzajemną interakcje pomiędzy nimi. Czyli można przyjąć następujący schemat "podstawowy" przy tworzeniu nowego bloka np:
Dla kodu HTML:
<div id="header"> <div class="logo"> Nasze logo </div> </div>
Kod CSS:
#header{
margin:0;
padding:0;
}
.logo{
margin:0;
padding:0;
}
Brak komentarzy :
Prześlij komentarz