Osobny arkusz stylów dla Internet Explorera

Osobny arkusz stylów dla Internet Explorera

HTML + CSS Data aktualizacji: 18.12.2020

Osobny arkusz stylów dla Internet Explorera

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

Komentarze w HTML nie działają od Internet Explorer 10.
<!--[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>

Najlepsze oferty hostingu w 2021 roku

Ranking hostingów

Autor: Bartosz Stefanicki. Data publikacji: 23.06.2010r. Tagi: css, html, Internet Explorer. Źródło obrazka porady: Logo Internet Explorer.

1 komentarz