todos sea que porque para pagina navegadores los internet ie11 hack hacer diferente con compatible compatibilidad como codigo bien javascript html css internet-explorer-10 conditional-comments

sea - ¿Cómo apuntar solo a Internet Explorer 10 para ciertas situaciones como CSS específico de Internet Explorer o código JavaScript específico de Internet Explorer?



pagina web no se ve bien en internet explorer (24)

¿Cómo apuntar solo a Internet Explorer 10 para ciertas situaciones como CSS específico de Internet Explorer o código JavaScript específico de Internet Explorer?

Intenté esto, pero no funciona:

<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 ignora los comentarios condicionales y utiliza <html lang="en" class="no-js"> lugar de <html class="no-js ie10" lang="en"> .

Ambas soluciones publicadas aquí (con ligeras modificaciones) funcionan:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className=''ie10'';}</script><!--<![endif]-->

o

<script>if(Function(''/*@cc_on return 10===document.documentMode@*/'')()){document.documentElement.className=''ie10'';}</script>

Incluyes cualquiera de las líneas anteriores dentro de la etiqueta principal de tu página html antes de tu enlace css. Y luego, en el archivo css, especifique sus estilos con una clase "ie10" como padre:

.ie10 .myclass1 { }

¡Y voilá! - otros navegadores permanecen intactos. Y no necesitas jQuery. Puedes ver el ejemplo de cómo lo implementé aquí: http://kardash.net .

Así es como hago CSS personalizado para Internet Explorer:

En mi archivo JavaScript:

function isIE () { var myNav = navigator.userAgent.toLowerCase(); return (myNav.indexOf(''msie'') != -1) ? parseInt(myNav.split(''msie'')[1]) : false; } jQuery(document).ready(function(){ if(var_isIE){ if(var_isIE == 10){ jQuery("html").addClass("ie10"); } if(var_isIE == 8){ jQuery("html").addClass("ie8"); // you can also call here some function to disable things that //are not supported in IE, or override browser default styles. } } });

Y luego en mi archivo CSS, y defino cada estilo diferente:

.ie10 .some-class span{ ....... } .ie8 .some-class span{ ....... }

CSS para IE10 + e IE9

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ styles */ } @media screen/0 { /* IE8,9,10 styles*/ }

Con JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE document.getElementsByTagName(''html'')[0].className= ''no-js ie''; }

Trabaja para todos los IE.

IE08 => ''Trident/4.0'' IE09 => ''Trident/5.0'' IE10 => ''Trident/6.0'' IE11 => ''Trident/7.0''

Entonces cambie /Trident/g por /Trident/x.0/g donde x = 4, 5, 6 o 7 (o tal vez 8 para el futuro).

Conditionizr (ver documentos) agregará clases CSS de navegador a su elemento html, incluyendo ie10.

Encontré una solución en this sitio donde alguien tenía un comment valioso:

La solucion es:

if (Function(''/*@cc_on return document.documentMode===10@*/'')()){ document.documentElement.className+='' ie10''; }

Eso

  • no necesita comentarios condicionales;
  • funciona incluso si se descomprime la compresión / procesamiento;
  • no se agregó una clase ie10 en Internet Explorer 11;
  • es más probable que funcione de la manera prevista con Internet Explorer 11 ejecutándose en modo de compatibilidad con Internet Explorer 10;
  • no necesita una etiqueta de script independiente (solo se puede agregar a otro código JavaScript en el encabezado).
  • no necesita jQuery para probar

Escribí un pequeño plugin de JavaScript llamado Layout Engine , que permite detectar IE 10 (y cualquier otro navegador) de una manera sencilla que no se puede fingir, a diferencia del rastreo de agente de usuario.

Agrega el nombre del motor de representación como una clase en la etiqueta html y devuelve un objeto JavaScript que contiene el proveedor y la versión (cuando corresponda)

Echa un vistazo a la publicación de mi blog: http://mattstow.com/layout-engine.html y obtén el código en GitHub: https://github.com/stowball/Layout-Engine

Esta respuesta me dio el 90% del camino hasta allí. Encontré el resto de mi respuesta en el sitio de Microsoft aquí .

El siguiente código es lo que estoy usando para apuntar a todos, es decir, agregando una clase .ie a <html>

Use jQuery (que desaprobó .browser en favor de los agentes de usuario en 1.9+, vea http://api.jquery.com/jQuery.browser/ ) para agregar una clase .ie:

// ie identifier $(document).ready(function () { if (navigator.appName == ''Microsoft Internet Explorer'') { $("html").addClass("ie"); } });

No utilizaría JavaScript navigator.userAgent o $.browser (que usa navigator.userAgent ) ya que se puede suplantar.

Para orientar Internet Explorer 9, 10 y 11 (Nota: también el último Chrome):

@media screen and (min-width:0/0) { /* Enter CSS here */ }

Para orientar Internet Explorer 10:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS here */ }

Para orientar el navegador Edge:

@supports (-ms-accelerator:true) { .selector { property:value; } }

Fuentes:

Para mí, el siguiente código funciona bien, todos los comentarios condicionales funcionan en todas las versiones de IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]--> <script> if (document.documentMode===10){ document.documentElement.className+='' ie10''; } else if (document.documentMode===11){ document.documentElement.className+='' ie11''; } </script>

Estoy en Windows 8.1, no estoy seguro si está relacionado con la actualización ie11 ...

Puede usar PHP para agregar una hoja de estilo para IE 10

Me gusta:

if (stripos($_SERVER[''HTTP_USER_AGENT''], ''MSIE 10'')) { <link rel="stylesheet" type="text/css" href="../ie10.css" /> }

Puede usar la detección de características para ver si el navegador es IE10 o superior, así:

var isIE = false; if (window.navigator.msPointerEnabled) { isIE = true; }

Solo es verdadero si> IE9

Si debe hacer esto, puede verificar la cadena del agente de usuario en JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

Como otras personas han mencionado, siempre recomendaría la detección de características en su lugar.

Si desea dirigirse a IE 10 con JavaScript de Vanilla, es posible que desee probar la detección de propiedad de CSS:

if (document.body.style.msTouchAction != undefined) { document.body.className = ''ie10''; }

Propiedades de CSS

En lugar de msTouchAction también puede usar una de estas propiedades de CSS, porque actualmente solo están disponibles en IE 10. Pero esto podría cambiar en el futuro.

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

Página de prueba

He creado una página de prueba con todas las propiedades en CodePen.

Si realmente tiene que hacerlo, puede hacer que los comentarios condicionales funcionen agregando la siguiente línea a <head> :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Source

Solo quería agregar mi versión de detección de IE. Se basa en un fragmento encontrado en http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ y ampliado para que también sea compatible con ie10 y ie11. Detecta IE 5 a 11.

Todo lo que necesita hacer es agregarlo a alguna parte y luego siempre puede verificarlo con una condición simple. La var isIE global isIE estará definida si no es un IE, o de lo contrario será el número de versión. Entonces puede agregar fácilmente cosas como if (isIE && isIE < 10) o similar.

var isIe = (function(){ if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ } if (Function(''/*@cc_on return /^10/.test(@_jscript_version) @*/'')()) { return 10; /* IE10 */ } 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; }());

Tal vez puedas probar algo como jQuery:

if ($.browser.msie && $.browser.version === 10) { $("html").addClass("ie10"); }

Para usar este método, debe incluir la biblioteca jQuery Migrate porque esta función se eliminó de la biblioteca jQuery principal.

Funcionó bastante bien para mí. ¡Pero seguramente no hay reemplazo para comentarios condicionales!

Un buen lugar para comenzar es la Documentación de Soporte de Estándares de IE .

A continuación, se indica cómo orientar IE10 en JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) { ... }

A continuación, se indica cómo orientar IE10 en CSS:

@media all and (-ms-high-contrast: none) { ... }

En caso de que IE11 necesite ser filtrado o reseteado a través de CSS, vea otra pregunta: ¿Cómo escribir un hack de CSS para IE 11?

Uso esta secuencia de comandos: es anticuada, pero es efectiva para seleccionar una hoja de estilo de Internet Explorer 10 o un archivo de JavaScript que se incluye solo si el navegador es Internet Explorer 10, de la misma forma que lo haría con los comentarios condicionales. No se requiere jQuery u otro complemento.

<script> /*@cc_on @if (@_jscript_version == 10) document.write('' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />''); @end @*/ </script >

clipBoardData es una función que solo está disponible en IE, por lo que si está buscando apuntar a todas las versiones de IE puede usar

<script type="text/javascript"> if (window.clipboardData) alert("You are using IE!"); </script>

solución moderna para css

html[data-useragent*=''MSIE 10.0''] .any { your-style: here; }

Internet Explorer 10 ya no intenta leer comentarios condicionales. Esto significa que tratará los comentarios condicionales al igual que cualquier otro navegador: como comentarios HTML regulares, destinados a ser ignorados por completo. Si consideramos el marcado proporcionado en la pregunta como ejemplo, todos los navegadores, incluido IE10, ignorarán por completo las partes de comentario, resaltadas en gris. El estándar HTML5 no menciona la sintaxis de comentario condicional, y esta es exactamente la razón por la que han decidido dejar de apoyarlo en IE10.

Sin embargo, tenga en cuenta que aún se admite la compilación condicional en JScript, tal como se muestra en los comentarios y en las respuestas más recientes. Tampoco desaparecerá en la versión final, a diferencia de jQuery.browser . Y, por supuesto, no hace falta decir que el rastreo de agente de usuario sigue siendo tan frágil como siempre y que nunca debe usarse bajo ninguna circunstancia.

Si realmente debe apuntar a IE10, utilice la compilación condicional que aún puede ver soporte en el futuro cercano o, si puede ayudarlo, use una biblioteca de detección de funciones como Modernizr en lugar de (o junto con) la detección del navegador. A menos que su caso de uso requiera de una aplicación no especificada o de acomodar IE10 en el lado del servidor, el rastreo de agente de usuario va a ser más un dolor de cabeza que una opción viable.

Suena bastante engorroso, pero recuerde que como un navegador moderno que cumple con los estándares web actuales 1 , suponiendo que haya escrito un código interoperable que sea altamente compatible con los estándares, no debería tener que separar un código especial para IE10 a menos que sea absolutamente necesario. es decir, se supone que se parece a otros navegadores en términos de comportamiento y representación. 2 Y suena exagerado, dada la historia de IE, pero ¿cuántas veces esperabas que Firefox o Chrome se comportaran de la misma manera solo para recibir consternación?

Si tiene un motivo legítimo para dirigirse a determinados navegadores, hágalo sin problemas con las otras herramientas que se le proporcionen. Solo digo que va a estar mucho más presionado para encontrar esa razón hoy de lo que solía ser, y realmente no es algo en lo que pueda confiar.

1 No solo IE10, sino IE9 e incluso IE8, que maneja la mayor parte del estándar maduro CSS2.1 mucho mejor que Chrome, simplemente porque IE8 estaba tan enfocado en el cumplimiento de estándares (momento en el cual CSS2.1 ya era bastante estable con solo pequeñas diferencias de la recomendación de hoy), mientras que Chrome parece ser poco más que una demo técnica a medio pulir de pseudo-estándares de vanguardia.

2 Y puedo ser parcial cuando digo esto, pero seguro como el infierno. Si su código funciona en otros navegadores pero no en IE, las probabilidades de que sea ​​un problema con su propio código en lugar de IE10 son mucho mejores que, por ejemplo, hace 3 años, con versiones anteriores de IE. De nuevo, puedo ser parcial, pero seamos honestos: ¿tú tampoco? Solo mira tus comentarios.