IE StylesJeżeli zajmujesz się Web Developmentem to zapewne nie raz chciałeś wynaleźć wehikuł czasu i zabić wszystkich programistów odpowiadających za wygraną IE 5.0  w wojnie przeglądarek przeciwko Netscape.  Zwycięstwo tej wojny jest odczuwane ,aż do dzisiaj. Wiele użytkowników ślepo korzysta z IE. Świat na szczęście się zmienia…ale dzięki popularności systemu Windows XP użytkownicy IE8 i IE7 wciąż istnieją.

Tak to jest, gdy scalisz swoją przeglądarkę z systemem operacyjnym. Poza tym nie oszukujmy się nawet JQuery oficjalnie powiedziało nie dla IE8.

Tak koniec pisania specjalnych skryptów dla IE, bo są jakieś bugi z właściwością z-index i itp.

W tym wpisie opiszę technikę tworzenia oddzielnych styli dla IE.  Jest to prosty sposób na rozwiązanie problemu z IE, jak i z jej specyficznymi wersjami.

Miejmy nadzieje ,że niedługo nie będziemy musieli z takich podobnych technik korzystać.

Kiedy korzystać z warunkowych CSS.

  • Masz problemy z IE i muszą one być naprawione
  • Twój kod CSS musi być wolny od haków IE
  • Chcesz mieć porządek w swoich plikach CSS
  • Technika ta jest akceptowana przez Microsoft więc dlaczego nie chciałbyś jej użyć.

Tagi warunkowe mogą być używane nie tylko do CSS. W ten sam sposób możesz uruchomić warunkowo skrypty JavaScript, jak i elementy HTML.

Kod

Kod idzie do sekcji <head> wraz z innymi odwołaniami do plików CSS.

Wszystkie wersje IE 
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Wszystko tylko nie IE 
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Tylko IE7 
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Tylko IE6 
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Tylko IE5 
<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Tylko IE5.5 
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Tylko IE6 i niżej 
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Tylko IE6 i niżej 
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Tylko IE7 i niżej 
<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Tylko IE7 i niżej 
<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Tylko IE8 i niżej 
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Tylko IE8 i niżej 
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Tylko IE7 i wyżej 
<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Tylko IE7 i wyżej 
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Tylko IE8 i wyżej 
<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Tylko IE8 i wyżej 
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Haki dla IE

Jeśli już musisz mieć wszystko w jednym pliku CSS na pewno będzie chciał skorzystać z haków dla IE.

Tylko IE6 
* html #div { 
    height: 100px;
}
Tylko IE7 
*+html #div { 
    height: 100px;
}
Tylko IE8 
#div {
  height: 100px\0/;
}
Tylko IE7 I IE8 
#div {
  height: 100px\9;
}
Wszystko oprócz IE7 
#div {
   _height: 100px;
}
Ukrywa właściwość dla IE6 i niżej 
#div {
   height/**/: 100px;
}
Ukrywa właściwość dla IE6 i niżej 
html > body #div {
      height: 100px;
}

 

Rozwiązanie JQuery < 1.9 i inne ciekawostki

Jeśli rozwiązanie z tagami tobie się nie podoba zawsze możesz użyć JQuery. Oto prosty kod, który umieści wybrany styl w zależności od tego, czy przeglądarka jest IE, czy nie. Dla efektywności możesz usunąć cześć z “dokument.ready”.

<script type="text/javascript">
    $(document).ready(function () {
        if ($.browser.msie) {
            $("head").append('<link href="/Portals/CSS/menuBar_IE.css" rel="stylesheet" />');
        } else {
            $("head").append('<link href="/Portals/CSS/menuBar.css" rel="stylesheet" />');
        }
    })
</script>

Rozwiązanie to działa do wersji 1.9. Dlaczego więc nie użyć czystego JavaScript?

//check for IE7
if(navigator.appVersion.indexOf("MSIE 7.")!=-1){}

Wstrzykując taki skrypt do HTML też możemy określić jaką przeglądarkę obsługujemy.

var ie = (function () {

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

Źródło https://gist.github.com/padolsey/527683

To by było na tyle.