<! - [if! IE]> não está funcionando


139

Estou tendo problemas para conseguir

<!--[if !IE]>

trabalhar. Gostaria de saber se é porque eu tenho isso no meu documento

<!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]-->

Quando eu adiciono

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

para o meu cabeçalho, por algum motivo, não funciona. No entanto, se eu adicionar

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

para a página html real (no cabeçalho) funciona. Alguma sugestão? Felicidades

Atualizar para minha pergunta

Ok, quando removi <!-->, verifiquei apenas o IE que estava funcionando, mas agora de volta ao FF, o no-ie.css também havia sido aplicado ao FF. Então eu adicionei de volta no <!-->e removi o / (e o adicionei no modelo principal para que o cms não o adicionasse novamente) e tudo está funcionando novamente no FF, mas agora a folha de estilo está sendo aplicada ao IE! Então eu tentei

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

e

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

E isso não funcionou. Basicamente, estou tentando fazer com que esta página funcione http://css-tricks.com/examples/ResponsiveTables/responsive.php, mas mova o css para uma folha de estilo. Certamente tem que ser simples. o que estou perdendo? Prefiro não usar o JQuery se não precisar. Felicidades


1
Você não precisa <!-->imediatamente após o<!--[if !IE]>
techfoobar 9/12/12

29
Nota: se o IE funcionar apenas com o IE9.
cameronjonesweb

Algumas pessoas deixaram mensagens engraçadas do IF IE em algumas páginas.
neverMind9

@cameronjonesweb você pode vincular uma referência? Caso contrário, declarações como estas não são tão úteis?
trainoasis 25/11/19

@trainoasis, eu poderia, exceto que o meu comentário tem 5 anos #
cameronjonesweb 25/11/19

Respostas:


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

Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante .


39
Em junho de 2013, esta é a única resposta correta nesta página.
JohnB

2
Esta linha está faltando um suporte de ângulo de fechamento? Não deveria ser: <! - [if! IE]> <! -> <script src = "zepto.min.js"> </script> <! -> <! [Endif] ->
n00shie

1
Este, juntamente com todas as outras soluções de comentários condicionais, não irá detectar IE 10 / IE 11
Lloyd Banks

9
Ele não funciona no IE 11, ele carrega o script, mesmo que a condição seja: IE
Giedrius

49
@Giedrius De IE10 em, comentários condicionais são não mais suportada : msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
acdcjunior

70

Navegadores que não sejam o IE tratam as instruções condicionais como comentários, porque estão dentro de tags de comentários.

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

No entanto, quando você segmenta um navegador que NÃO é o IE, é necessário usar 2 comentários, um antes e um após o código. O IE ignorará o código entre eles, enquanto outros navegadores o tratarão como código normal. A sintaxe para direcionar navegadores não-IE é, portanto:

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

Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante .


1
Isso é ótimo. Obrigado por isso. A folha de estilo funciona, no entanto, o problema que tenho agora é que, no topo da página acima do cabeçalho, isso aparece em, por exemplo, <! - [if! IE] -> <! - [endif] -> (a tag foi na área de cabeçalho, não no corpo)
user1516788

21
-1: esta resposta está incorreta porque não<!--[if !IE]-->IE ignores this<!--[endif]--> está oculta do IE! (7, 8 ou 9)
JohnB

3
Nenhuma das respostas funcionou para mim, talvez algo tenha mudado na versão recente do IE10 (tentei no modo IE9 também). - Todas as tentativas chegaram à seção! IE em todos os navegadores (IE e não IE).
Danny Varod

2
O IE10 não suporta instruções condicionais.
Scorpius

1
Esteja ciente dos espaços em branco em <! - [if IE]> e <! [Endif] -> - não deve haver espaços em branco (por exemplo, entre! - e [. Não funciona com espaços em branco.
Robert Skarżycki 29/11

37

Uma atualização se alguém ainda chegar a esta página, perguntando-se por que a segmentação por exemplo não funciona. O IE 10 em diante não oferece mais suporte a comentários condicionais. No site oficial da EM:

O suporte para comentários condicionais foi removido nos modos de padrões e peculiaridades do Internet Explorer 10 para melhorar a interoperabilidade e a conformidade com o HTML5.

Consulte aqui para obter mais detalhes: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

Se você precisar desesperadamente direcionar ie, você pode usar este código jquery para adicionar uma classe ie e, em seguida, usar a classe .ie em seu css para direcionar navegadores.

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

Atualização: $ .browser não está disponível após o jQuery 1.9. Se você atualizar para o jQuery acima de 1.9 ou já o usar, poderá incluir o script de migração do jQuery após o jQuery para adicionar partes ausentes: Plug-in de migração do jQuery

Como alternativa, verifique este tópico para possíveis soluções alternativas: erro browser.msie após a atualização para o jQuery 1.9.1


Essa é uma solução muito boa! Nem preciso usá-lo na árvore dom para aplicar determinadas classes.
Mmm

2
Observe que isso foi preterido desde o jQuery 1.3 e removido em 1.9
Jøran


12

A sintaxe recomendada pela Microsoft para "comentários" condicionais revelados no nível inferior é a seguinte:

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

Estes não são comentários, mas funcionam corretamente.


Encontrei este link que suporta esta resposta, também tem muitas outras informações que poderiam ajudar o tópico, acho que este é um assunto importante ... a única diferença que vejo é se uma sintaxe oculta ou revelada é usada e não tenho certeza de como isso afetará outros navegadores ... msdn.microsoft.com/en-us/library/ms537512.ASPX
user1360809

2
Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante
Flimm 6/17

8

Antes de tudo, a sintaxe correta é:

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

Tente este post: http://www.quirksmode.org/css/condcom.html e http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Outra coisa que você pode fazer:

Verifique o navegador com jQuery:

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

Nesse caso, você pode alterar as regras css para alguns elementos ou adicionar uma nova referência de link css:

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


Consulte a resposta do usuário1324409 acima para obter uma resposta mais precisa.
Chris Peters

2
Devido às atualizações do jQuery, qualquer pessoa que use $ .browser.msie, precisará incluir o jquery-migrate.js, e isso funcionará.
precisa

1
Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante
Flimm 6/17

O link fornecido na resposta está morto.
Pankaj

8

Você precisa colocar um espaço para o <!-- [if !IE] --> bloco My css completo da seguinte maneira, pois o IE8 é terrível com consultas de mídia

<!-- 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] -->

Obrigado pelo seu comentário, mas se eu usar <! - [if! IE] -> <link rel = "stylesheet" type = "text / css" href = "/ stylesheets / no-ie.csss" /> <! - [endif] -> outros navegadores também aplicam isso.
user1516788

3
Não é esse o ponto, para que outros navegadores apliquem essa seção?
quer

1
-1: A !IEtécnica mencionado aqui vai efectivamente executar o bloco comentou para o IE 7 a 10.
Ian Campbell

1
Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante
Flimm 6/17

8

Para segmentar usuários do IE:

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

Para segmentar todos os outros:

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

Os Comentários Condicionais podem ser detectados apenas pelo Internet Explorer, todos os outros Navegadores o encadearam como Comentários normais.

Para atingir o IE 6,7, etc. Você deve usar "Maior que igual" ou "Menor que (igual)" na instrução If. Como isso.

Maior que ou igual:

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

Menos do que:

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

Fonte: mediacollege.com


2
Nota: Esses comentários condicionais não são mais suportados a partir do IE 10 em diante
Flimm 6/17

7

Isso é até o 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>

Isto é para depois do IE9

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {enter your CSS here}

5

Para o navegador IE:

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

Para todos os navegadores que não sejam do IE:

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

Para todos os IE maiores que 8 ou todos os navegadores que não sejam do IE:

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

3

Comentário condicional é um comentário iniciado com o <!--[if IE]>qual não pôde ser lido por nenhum navegador, exceto o IE.

a partir de 2011 O comentário condicional não é suportado no formulário IE 10, conforme anunciado pela Microsoft naquele tempo https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

A única opção para usar os comentários condicionais é solicitar que o IE execute o site como IE 9, que suporta os comentários condicionais.

você pode escrever seus próprios arquivos css e / ou js, ou seja, apenas e outros navegadores não o carregarão ou executarão.

esse trecho de código mostra como fazer o IE 10 ou 11 executar ie-only.css e ie-only.js, que contém códigos personalizados para solucionar problemas de compatibilidade do 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>


1

Isso funciona para mim em todos os navegadores maiores que a versão 6 (IE7, 8, 9, 10, etc., Chrome 3 até o que é agora e FF ver 3 até o que é agora):

//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;
        }

0

Estou usando este javascript para detectar o navegador 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");
}

0

Obrigado Fernando68, eu usei isso:

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.');
     });
}

-1

Eu recebo este código funciona no meu navegador:

<!--[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]-->

Nota para este código: Suporte a Shiv HTML5 e Respond.js IE8 de elementos HTML5 e consultas de mídia

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.