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).
<!--[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>
Kategorie: HTML + CSS. Tagi: #css, #html, #Internet Explorer. Źródło obrazków: Pixabay, Font awesome.
