<! - [if! IE]> no funciona


139

Tengo problemas para conseguir

<!--[if !IE]>

trabajar. Me pregunto si es porque tengo esto en mi 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]-->

Cuando agrego

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

a mi encabezado por alguna razón no funciona. Sin embargo si agrego

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

a la página html real (en el encabezado) funciona. ¿Alguna sugerencia? Salud

Actualizar a mi pregunta

Ok, cuando <!-->eliminé solo verifiqué en IE, que estaba funcionando, pero ahora de vuelta en FF, el no-ie.css también se había aplicado a FF. Así que agregué nuevamente <!-->y eliminé el / (y lo agregué a la plantilla principal para que el cms no lo agregara nuevamente) y todo está funcionando de nuevo en FF, ¡pero ahora la hoja de estilo se está aplicando a IE! Así que lo intenté

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

y

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

Y eso no funcionó. Básicamente estoy tratando de hacer que esta página funcione http://css-tricks.com/examples/ResponsiveTables/responsive.php pero muevo el css a una hoja de estilo. Seguramente tiene que ser simple. ¿Qué me estoy perdiendo? Prefiero no usar JQuery si no tengo que hacerlo. Salud


1
No necesita el <!-->inmediatamente después del<!--[if !IE]>
techfoobar

29
Nota: si IE solo funciona hasta IE9.
cameronjonesweb

Algunas personas dejaron divertidos mensajes IF IE en algunas páginas.
neverMind9

@cameronjonesweb ¿puede vincular una referencia? De lo contrario, ¿declaraciones como estas no son tan útiles?
trainoasis

@trainoasis, podría, excepto que mi comentario tiene 5 años
cameronjonesweb

Respuestas:


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

Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante .


39
A partir de junio de 2013, esta es la única respuesta correcta en esta página.
JohnB

2
¿Le falta a esta línea un corchete angular de cierre? Si no fuera así: <! - [if! IE]> <! -> <script src = "zepto.min.js"> </script> <! -> <! [Endif] ->
n00shie

1
Esto, junto con todas las otras soluciones de comentarios condicionales, no detectará IE 10 / IE 11
Lloyd Banks

9
¡No funciona en IE 11, carga script, incluso si la condición es! IE
Giedrius

49
@Giedrius Desde IE10 en adelante, los comentarios condicionales ya no son compatibles : msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
acdcjunior

70

Los navegadores que no sean IE tratan las declaraciones condicionales como comentarios porque están encerradas dentro de las etiquetas de comentarios.

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

Sin embargo, cuando se dirige a un navegador que NO es IE, debe usar 2 comentarios, uno antes y otro después del código. IE ignorará el código entre ellos, mientras que otros navegadores lo tratarán como código normal. La sintaxis para apuntar a navegadores que no son IE es, por lo tanto:

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

Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante .


1
Eso es genial. Gracias por eso. La hoja de estilo funciona, sin embargo, el problema que tengo ahora es que en la parte superior de la página, arriba del encabezado, esto aparece en <! - [if! IE] -> <! - [endif] -> (la etiqueta fue en el área del encabezado, no en el cuerpo)
user1516788

21
-1: ¡Esta respuesta es incorrecta porque no<!--[if !IE]-->IE ignores this<!--[endif]--> está oculta para IE! (7, 8 o 9)
JohnB

3
Ninguna de las respuestas funcionó para mí, tal vez algo cambió en el lanzamiento reciente de IE10 (probado en modo IE9 también). - Todos los intentos terminaron llegando a la sección! IE en todos los navegadores (IE y no IE).
Danny Varod

2
IE10 no admite declaraciones condicionales.
Scorpius

1
Tenga en cuenta los espacios en blanco en <! - [if IE]> y <! [Endif] -> - no debería haber espacios en blanco (por ejemplo, entre! - y [. No funciona con espacios en blanco.
Robert Skarżycki

37

Una actualización si alguien aún llega a esta página, preguntándose por qué la segmentación por ejemplo no funciona. IE 10 y posteriores ya no admiten comentarios condicionales. Desde el sitio web oficial de MS:

El soporte para comentarios condicionales se ha eliminado en los estándares y modos de peculiaridades de Internet Explorer 10 para mejorar la interoperabilidad y el cumplimiento de HTML5.

Consulte aquí para obtener más detalles: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

Si necesita apuntar desesperadamente, es decir, puede usar este código jquery para agregar una clase ie y luego usar la clase .ie en su css para apuntar a los navegadores ie.

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

Actualización: $ .browser no está disponible después de jQuery 1.9. Si actualiza a jQuery por encima de 1.9 o ya lo usa, puede incluir la secuencia de comandos de migración de jQuery después de jQuery para que agregue las partes que faltan: jQuery Migrate Plugin

Alternativamente, revise este hilo para posibles soluciones: error browser.msie después de actualizar a jQuery 1.9.1


esa es una muy buena solución! Ni siquiera necesito usarlo en el árbol dom para aplicar ciertas clases.
mmm

2
Tenga en cuenta que esto está en desuso desde jQuery 1.3 y se eliminó en 1.9
Jøran


12

La sintaxis recomendada por Microsoft para los "comentarios" condicionales revelados a nivel inferior es la siguiente:

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

Estos no son comentarios, pero funcionan correctamente.


Encontré este enlace que admite esta respuesta, también tiene mucha otra información que podría ayudar al hilo, creo que este es un tema importante ... La única diferencia que veo es si se usa una sintaxis oculta o revelada y no estoy seguro de cómo esto afectará a otros navegadores ... msdn.microsoft.com/en-us/library/ms537512.ASPX
user1360809

2
Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante
Flimm el

8

En primer lugar, la sintaxis correcta es:

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

Pruebe esta publicación: http://www.quirksmode.org/css/condcom.html y http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Otra cosa que puedes hacer:

Verifique el navegador con jQuery:

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

en este caso, puede cambiar las reglas de CSS para algunos elementos o agregar una nueva referencia de enlace CSS:

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


Consulte la respuesta del usuario 1324409 anterior para obtener una respuesta más precisa.
Chris Peters

2
Debido a las actualizaciones de jQuery, cualquiera que use $ .browser.msie tendrá que incluir jquery-migrate.js y esto funcionará.
AspiringCanadian

1
Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante
Flimm el

El enlace proporcionado en la respuesta está muerto.
Pankaj

8

Debe poner un espacio para el <!-- [if !IE] --> bloque Mi css completo de la siguiente manera, ya que IE8 es terrible con las consultas de medios

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

Gracias por su comentario, pero si uso <! - [if! IE] -> <link rel = "stylesheet" type = "text / css" href = "/ stylesheets / no-ie.csss" /> <! - [endif] -> luego otros navegadores aplican esto también.
user1516788

3
¿No es ese el punto, para que otros navegadores apliquen esa sección?
John Hayford

1
-1: La !IEtécnica mencionada aquí ejecutará realmente el bloque comentado para IE 7 a 10.
Ian Campbell

1
Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante
Flimm el

8

Para dirigirse a usuarios de IE:

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

Para apuntar a todos los demás:

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

Los comentarios condicionales solo pueden ser detectados por Internet Explorer, todos los demás navegadores los enhebran como comentarios normales.

Para apuntar a IE 6,7, etc. Debe usar "Mayor que igual" o "Menor que (igual)" en la instrucción If. Me gusta esto.

Mayor que o igual:

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

Menor que:

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

Fuente: mediacollege.com


2
Nota: Estos comentarios condicionales ya no son compatibles desde IE 10 en adelante
Flimm el

7

Esto es para hasta 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>

Esto es para después de IE9

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

5

Para el navegador IE:

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

Para todos los navegadores que no son IE:

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

Para todos los IE mayores de 8 O todos los navegadores que no sean IE:

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

3

El comentario condicional es un comentario que comienza con el <!--[if IE]>cual no puede ser leído por ningún navegador, excepto IE.

desde 2011 El comentario condicional no es compatible con el formulario IE 10 anunciado por Microsoft en ese momento https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

La única opción para usar los comentarios condicionales es solicitar a IE que ejecute su sitio como IE 9, que admite los comentarios condicionales.

puede escribir sus propios archivos css y / o js, ​​es decir, solo y otros navegadores no lo cargarán ni lo ejecutarán.

Este fragmento de código muestra cómo hacer que IE 10 u 11 se ejecute ie-only.css y ie-only.js que contiene códigos personalizados para resolver problemas de compatibilidad de 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

Esto funciona para mí en todos los navegadores superiores a la versión 6 (IE7, 8, 9, 10, etc., Chrome 3 hasta lo que es ahora, y FF ver 3 hasta lo que es ahora):

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

Estoy usando este javascript para detectar el 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

Gracias Fernando68, usé esto:

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

Me sale este código funciona en mi 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: compatibilidad con HTML5 Shiv y Respond.js IE8 de elementos HTML5 y consultas de medios

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.