Podczas tworzenia strony internetowej, pewnie nie raz zauważyłeś jak dany element witryny wyświetlany był inaczej w Internet Explorerze, i w innych przeglądarkach. Jednym ze sposobów na pozbycie się tych błędów, jest utworzenie odrębnego arkusza stylów CSS oraz wykorzystanie komentarzy warunkowych, jakie respektowane są wyłącznie przez IE. Dzięki temu będziemy w stanie nadać inne wartości dla wspomnianej przeglądarki, definiując je zwyczajnie w osobnym pliku.
CSS
Widoczność kodu w Internet Explorerze możemy warunkować poprzez CSS:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// Przykład: ukrycie / pokazanie jakiegoś bloku w IE 10/11
}
HTML
Poniżej zamieszczona jest lista komentarzy warunkowych, w których możemy zaznaczyć, by nasz arkusz był widoczny np. dla przeglądarki MSIE w wersji 7+ (if lt IE 7) lub 8- (if gt IE 8). Komentarze umieszczamy w treści nagłówkowej strony (ramy head).
<!--[if IE]>
Komentarz widoczny w Internet Explorer
<![endif]-->
<!--[if IE 7]>
Komentarz widoczny w Internet Explorer 7
<![endif]-->
<!--[if lt IE 7]>
Komentarz widoczny w wersji Internet Explorer nowszej niż 7
<![endif]-->
<!--[if gt IE 7]>
Komentarz widoczny w wersji Internet Explorer starszej niż 7
<![endif]-->
<!--[if lte IE 6]>
Komentarz widoczny w wersji Internet Explorer 6 lub nowszej
<![endif]-->
<!--[if gte IE 7]>
Komentarz widoczny w wersji Internet Explorer 7 lub starszej
<![endif]-->
Komentarze warunkowe - wersja przeglądarki:
- gt (ang. greater than) - starsza od
- gte (ang. greater than / equal to) - starsza od, lub równa wersji
- lt (ang. less than) - nowsza od
- lte (ang. less than / equal to) - nowsza od, lub równa wersji
Przykład wykorzystania
<head>
<!--[if gt IE 6]>
<style type="text/css">
/* <![CDATA[ */
wartości dla przeglądarki MSIE
/* ]]> */
</style>
<![endif]-->
</head>
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Wrzesień 2023).
Data publikacji: 23.06.2010 r. Tagi: css, html, Internet Explorer. Źródło obrazka porady: Logo Internet Explorer.