Osobny arkusz stylów dla Internet Explorera

Bartosz

Bartosz Stefanicki 18 grudnia 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>

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.

1 komentarz


© 2005-2023 itporady.pl. Wszystkie prawa zastrzeżone.

Używamy informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach reklamowych, statystycznych oraz dostosowania naszych serwisów do indywidualnych potrzeb użytkowników.