<! - [if! IE]> ne fonctionne pas

139

J'ai du mal à obtenir

<!--[if !IE]>

travailler. Je me demande si c'est parce que je l'ai dans mon document

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

Quand j'ajoute

<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<!--<![endif]-->

à mon en-tête pour une raison quelconque, cela ne fonctionne pas. Cependant si j'ajoute

<!--[if !IE]><!-->
    <style>
        All my css in here
    </style>
    <!--<![endif]-->

à la page html réelle (dans l'en-tête) cela fonctionne. Aucune suggestion? À votre santé

Mettre à jour ma question

Ok, quand j'ai supprimé <!-->je n'ai vérifié que dans IE qui fonctionnait, mais maintenant de retour dans FF, le no-ie.css avait été appliqué à FF aussi. J'ai donc rajouté <!-->et supprimé le / (et ajouté cela dans le modèle principal pour que le cms ne l'ajoute pas) et tout fonctionne à nouveau dans FF mais maintenant la feuille de style est appliquée à IE! Alors j'ai essayé

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/stylesheets/no-ie.css">
<![endif]-->

et

<!--[if !IE]> -->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<!-- <![endif]-->

Et cela n'a pas fonctionné. Fondamentalement, j'essaye de faire fonctionner cette page http://css-tricks.com/examples/ResponsiveTables/responsive.php mais déplacez le CSS dans une feuille de style. Cela doit sûrement être simple. Qu'est-ce que je rate? Je préfère ne pas utiliser JQuery si je n'ai pas à le faire. À votre santé

user1516788
la source
1
Vous n'avez pas besoin du <!-->immédiatement après le<!--[if !IE]>
techfoobar
29
Remarque: si IE ne fonctionne que jusqu'à IE9.
cameronjonesweb
Certaines personnes ont laissé des messages amusants IF IE sur certaines pages.
neverMind9
@cameronjonesweb pouvez-vous lier une référence, sinon des déclarations comme celles-ci ne sont pas aussi utiles?
trainoasis
@trainoasis, je pourrais, sauf que mon commentaire a 5 ans
cameronjonesweb

Réponses:

236
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->

Remarque: ces commentaires conditionnels ne sont plus pris en charge à partir d'IE 10 .

Penser
la source
39
En juin 2013, c'est la seule bonne réponse sur cette page.
JohnB
2
Cette ligne manque-t-elle une équerre de fermeture? Ne devrait-il pas être: <! - [if! IE]> <! -> <script src = "zepto.min.js"> </script> <! -> <! [Endif] ->
n00shie
1
Ceci, ainsi que toutes les autres solutions de commentaires conditionnels, ne détectera pas IE 10 / IE 11
Lloyd Banks
9
Cela ne fonctionne pas dans IE 11, il charge le script, même si la condition est! IE
Giedrius
49
@Giedrius À partir d'IE10, les commentaires conditionnels ne sont plus pris en charge : msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
acdcjunior
70

Les navigateurs autres que IE traitent les instructions conditionnelles comme des commentaires car elles sont incluses dans des balises de commentaire.

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

Cependant, lorsque vous ciblez un navigateur qui n'est PAS IE, vous devez utiliser 2 commentaires, un avant et un après le code. IE ignorera le code entre eux, alors que les autres navigateurs le traiteront comme du code normal. La syntaxe pour cibler les navigateurs non IE est donc:

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

Remarque: ces commentaires conditionnels ne sont plus pris en charge à partir d'IE 10 .

user1324409
la source
1
C'est génial. Merci pour ça. La feuille de style fonctionne mais le problème que j'ai maintenant est qu'en haut de la page au-dessus de l'en-tête cela apparaît dans c'est-à-dire <! - [if! IE] -> <! - [endif] -> (la balise est dans la zone d'en-tête pas le corps)
user1516788
21
-1: Cette réponse est incorrecte car elle <!--[if !IE]-->IE ignores this<!--[endif]-->n'est pas cachée à IE! (7, 8 ou 9)
JohnB
3
Aucune des réponses n'a fonctionné pour moi, peut-être que quelque chose a changé dans la récente version d'IE10 (essayé en mode IE9 également). - Toutes les tentatives ont abouti à la section! IE sur tous les navigateurs (IE et non IE).
Danny Varod
2
IE10 ne prend pas en charge les instructions conditionnelles.
Scorpius
1
Soyez conscient des espaces dans <! - [if IE]> et <! [Endif] -> - il ne devrait pas y avoir d'espaces blancs (par exemple entre! - et [. Cela ne fonctionne pas avec les espaces.
Robert Skarżycki
37

Une mise à jour si quelqu'un accède toujours à cette page, se demandant pourquoi le ciblage par exemple ne fonctionne pas. IE 10 et les versions ultérieures ne prennent plus en charge les commentaires conditionnels. Sur le site officiel de MS:

La prise en charge des commentaires conditionnels a été supprimée dans les modes standards et excentriques d'Internet Explorer 10 pour une interopérabilité et une conformité améliorées avec HTML5.

S'il vous plaît voir ici pour plus de détails: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

Si vous avez désespérément besoin de cibler ie, vous pouvez utiliser ce code jquery pour ajouter une classe ie à puis utiliser la classe .ie dans votre css pour cibler les navigateurs ie.

if ($.browser.msie) {
 $("html").addClass("ie");
}

Mise à jour: $ .browser n'est pas disponible après jQuery 1.9. Si vous mettez à niveau vers jQuery au-dessus de la version 1.9 ou que vous l'utilisez déjà, vous pouvez inclure le script de migration jQuery après jQuery afin qu'il ajoute les parties manquantes: Plugin jQuery Migrate

Vous pouvez également consulter ce fil pour les solutions de contournement possibles: erreur browser.msie après la mise à jour vers jQuery 1.9.1

Selay
la source
c'est une vraie belle solution! Je n'ai même pas besoin de l'utiliser sur l'arbre dom pour appliquer certaines classes.
mmm
2
Veuillez noter que ceci est obsolète depuis jQuery 1.3 et supprimé dans la version 1.9
Jøran
13

J'utilise ça et ça marche:

<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
Francis
la source
Cela fait que Firefox ne traite que l'ensemble du contenu comme un commentaire pour moi. La solution @Charmander fonctionnait à la fois pour IE et Firefox - <! [If! IE]> <! [Endif]>
Tom Chamberlain
3
Remarque: ces commentaires conditionnels ne
Flimm
12

La syntaxe recommandée par Microsoft pour les «commentaires» conditionnels révélés de niveau inférieur est la suivante:

<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>

Ce ne sont pas des commentaires, mais ils fonctionnent correctement.


la source
J'ai trouvé ce lien qui prend en charge cette réponse, a également beaucoup d'autres informations qui pourraient aider le fil, je pense que c'est un sujet important ... la seule différence que je vois est si une syntaxe cachée ou révélée est utilisée et je ne sais pas comment cela affectera d'autres navigateurs ... msdn.microsoft.com/en-us/library/ms537512.ASPX
user1360809
2
Remarque: ces commentaires conditionnels ne
Flimm
8

Tout d'abord, la bonne syntaxe est:

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/stylesheets/ie6.css" />
<![endif]-->

Essayez ce post: http://www.quirksmode.org/css/condcom.html et http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Une autre chose que vous pouvez faire:

Vérifiez le navigateur avec jQuery:

if($.browser.msie){ // do something... }

dans ce cas, vous pouvez modifier les règles css pour certains éléments ou ajouter une nouvelle référence de lien css:

lisez ceci: http://rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx

BorisD
la source
Voir la réponse de user1324409 ci-dessus pour une réponse plus précise.
Chris Peters
2
En raison des mises à jour de jQuery, quiconque utilise $ .browser.msie devra inclure jquery-migrate.js et cela fonctionnera.
AspiringCanadian
1
Remarque: ces commentaires conditionnels ne
Flimm
Le lien fourni dans la réponse est mort.
Pankaj
8

Vous devez mettre un espace pour le <!-- [if !IE] --> bloc Mon css complet comme suit, car IE8 est terrible avec les requêtes multimédias

<!-- IE 8 or below -->   
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css"  href="https://stackoverflow.com/Resources/css/master1300.css" />        
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="https://stackoverflow.com/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="https://stackoverflow.com/Resources/css/master480.css" />        
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="/Resources/css/master480.css" />
<!-- [endif] -->
John Hayford
la source
Merci pour votre commentaire mais si j'utilise <! - [if! IE] -> <link rel = "stylesheet" type = "text / css" href = "/ stylesheets / no-ie.csss" /> <! - [endif] -> alors d'autres navigateurs l'appliquent aussi.
user1516788
3
N'est-ce pas le but, que d'autres navigateurs appliquent cette section?
John Hayford
1
-1: La !IEtechnique mentionnée ici exécutera en fait le bloc commenté pour IE 7 à 10.
Ian Campbell
1
Remarque: ces commentaires conditionnels ne
Flimm
8

Pour cibler les utilisateurs IE:

<!--[if IE]>
Place Content here for Users of Internet Explorer.
<![endif]-->

Pour cibler tous les autres:

<![if !IE]>
Place Content here for Users of all other Browsers.
<![endif]>

Les commentaires conditionnels ne peuvent être détectés que par Internet Explorer, tous les autres navigateurs l'enfilent comme des commentaires normaux.

Pour cibler IE 6,7 etc., vous devez utiliser "Supérieur à égal" ou "Inférieur à (égal)" dans l'instruction If. Comme ça.

Meilleur que ou égal:

<!--[if gte IE 7]>
Place Content here for Users of Internet Explorer 7 or above.
<![endif]-->

Inférieur à:

<!--[if lt IE 6]>
Place Content here for Users of Internet Explorer 5 or lower.
<![endif]-->

Source: mediacollege.com

Grignotines
la source
2
Remarque: ces commentaires conditionnels ne
Flimm
7

C'est pour jusqu'à IE9

<!--[if IE ]>
<style> .someclass{
    text-align: center;
    background: #00ADEF;
    color: #fff;
    visibility:hidden;  // in case of hiding
       }
#someotherclass{
    display: block !important;
    visibility:visible; // in case of visible

}
</style>

C'est pour après IE9

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {enter your CSS here}
Chintu le gamin cool
la source
5

Pour le navigateur IE:

<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->

Pour tous les navigateurs non-IE:

<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>

Pour tous les navigateurs IE supérieurs à 8 OU tous les navigateurs non-IE:

<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
Kapil
la source
3

Le commentaire conditionnel est un commentaire commençant par <!--[if IE]> qui ne peut être lu par aucun navigateur, sauf IE.

à partir de 2011 Le commentaire conditionnel n'est pas pris en charge à partir de la forme IE 10 comme annoncé par Microsoft à cette époque https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

La seule option pour utiliser les commentaires conditionnels est de demander à IE d'exécuter votre site comme IE 9 qui prend en charge les commentaires conditionnels.

vous pouvez écrire vos propres fichiers css et / ou js pour ie uniquement et les autres navigateurs ne le chargeront ni ne l'exécuteront.

cet extrait de code montre comment faire exécuter IE 10 ou 11 ie-only.css et ie-only.js qui contient des codes personnalisés pour résoudre les problèmes de compatibilité d'IE.

    <html>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
      <!--[if IE]>
            <meta http-equiv="Content-Type" content="text/html; charset=Unicode">
            <link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
            <script src="/js/ie-only.js"></script>
      <![endif]-->
    </html>
Shady Sherif
la source
1

Dans le cas où vous travaillez avec IE 10 ou supérieur, comme indiqué dans http://tanalin.com/en/articles/ie-version-js/, les commentaires conditionnels ne sont plus pris en charge. Vous pouvez vous référer à https://gist.github.com/jasongaylord/5733469 comme méthode alternative, dont la version Trident est également vérifiée à partir du navigateur.userAgent. Ceci est également vérifié si le navigateur fonctionne en mode de compatibilité.

Toshihiko
la source
1

Cela fonctionne pour moi sur tous les navigateurs supérieurs à la version 6 (IE7, 8, 9, 10, etc., Chrome 3 jusqu'à ce qu'il est maintenant, et FF ver 3 jusqu'à ce qu'il est maintenant):

//test if running in IE or not
        function isIE () {
            var myNav = navigator.userAgent.toLowerCase();
            return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
        }
Fandango68
la source
0

J'utilise ce javascript pour détecter le navigateur IE

if (
    navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("EDGE") != -1
)
{
    $("#ie-warning").css("display", "block");
}
Muflix
la source
0

Merci Fernando68, j'ai utilisé ceci:

function isIE () {
     var myNav = navigator.userAgent.toLowerCase();
     return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}

if(isIE()){
     $.getScript('js/script.min.js', function() {
            alert('Load was performed.');
     });
}
Rodrigo Prazim
la source
-1

Je reçois ce code fonctionne sur mon navigateur:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Remarque pour ce code: HTML5 Shiv et Respond.js IE8 supportent les éléments HTML5 et les requêtes multimédias

Chetabahana
la source