czwartek, 13 marca 2014

Stylowanie css pod przeglądarkę Internet Explorer

Internet Explorer

Często zdarza się, że nasze style css są inaczej interpretowane przez przeglądarkę Internet Explorer niż chcielibyśmy. W poście tym opiszę sposoby radzenia sobie z takim problemem.

1. Załączenie zewnętrznych arkuszy stylów, które będą interpretowane tylko przez Internet Explorer.

W sekcji <head> ... </head> należy wstawić kod załączenia pliku css pod IE wraz z komentarzami np:

<!--[if IE]>
 <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Kod ten będzie działał dla wszystkich wersji Interner Explorer, natomiast inne przeglądarki nie będą brały go pod uwagę.

2. Zastosowanie tricków, hacków w css.

Tutaj nie tworzymy dodatkowych plików CSS, natomiast wykorzystujemy pewne właściwości przeglądarek.

Niektóre tricki działają tylko w poszczególnych wersjach internet explorer, a niektóre we wszystkich z wyłączeniem określonych wersji.

Widoczne tylko w IE-6

* html #div { margin: 20px; }

Widoczne tylko w IE-7

*+html #div { margin: 20px; }

Widoczne tylko w IE-8

#div { margin: 20px \0/; }

Widoczne tylko w IE-7 & IE-8

#div { margin: 20px\9; }

Niewidoczne w IE-7

#div { _margin: 20px; }

Niewidoczne w  IE 6 i wcześniejszych wersjach

#div { margin/**/: 20px; } html > body #div { margin: 20px; }

Brak komentarzy :

Prześlij komentarz