Osobny arkusz stylów dla Internet Explorera

HTML + CSS

Bartosz Stefanicki, 22.04.2024

Osobny arkusz stylów dla Internet Explorera

Podczas tworzenia strony internetowej, pewnie nie raz zauważyłeś jak strona internetowa była inaczej wyświetlana w IE. Jak to naprawić?

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>
#css, #html, #Internet Explorer. Źródło obrazków: Pixabay, Font awesome.

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Październik 2024).

1 komentarz

Ostatnie komentarze

Statystyki

  • 199

    Liczba porad
  • 1 997

    Liczba komentarzy
  • 5

    Narzędzi online

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

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.