¿Cómo escribir un hack de CSS para IE 11?

¿Cómo puedo piratear o escribir css solo para IE 11? Tengo un sitio web que se ve mal en IE 11. Solo busco aquí y allá, pero aún no encontré ninguna solución.

¿Hay algún selector css?

Use una combinación de reglas CSS específicas de Microsoft para filtrar IE11:

   IE10/11 Media Query Test      
Hi There!!!

Los filtros como este funcionan debido a lo siguiente:

Cuando un agente de usuario no puede analizar el selector (es decir, no es CSS válido 2.1), también debe ignorar el selector y el siguiente bloque de statement (si corresponde).

    IE10/11 Media Query Test      
Hi There!!!

A la luz del hilo evolutivo, he actualizado el siguiente:

IE 6

 * html .ie6 {property:value;} 

o

 .ie6 { _property:value;} 

IE 7

 *+html .ie7 {property:value;} 

o

 *:first-child+html .ie7 {property:value;} 

IE 6 y 7

 @media screen\9 { .ie67 {property:value;} } 

o

 .ie67 { *property:value;} 

o

 .ie67 { #property:value;} 

IE 6, 7 y 8

 @media \0screen\,screen\9 { .ie678 {property:value;} } 

IE 8

 html>/**/body .ie8 {property:value;} 

o

 @media \0screen { .ie8 {property:value;} } 

IE 8 solo modo estándar

 .ie8 { property /*\**/: value\9 } 

IE 8,9 y 10

 @media screen\0 { .ie8910 {property:value;} } 

Solo IE 9

 @media screen and (min-width:0\0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{property:value;} } 

IE 9 y superior

 @media screen and (min-width:0\0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up{property:value;} } 

IE 9 y 10

 @media screen and (min-width:0\0) { .ie910{property:value\9;} /* backslash-9 removes ie11+ & old Safari 4 */ } 

Solo IE 10

 _:-ms-lang(x), .ie10 { property:value\9; } 

IE 10 y superior

 _:-ms-lang(x), .ie10up { property:value; } 

o

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up{property:value;} } 

IE 11 (y superior …)

 _:-ms-fullscreen, :root .ie11up { property:value; } 

Alternativas de Javascript

Modernizr

Modernizr se ejecuta rápidamente en la carga de la página para detectar características; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html

Selección de agente de usuario

Javascript:

 var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform ); b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':''); 

Agrega (por ejemplo) el elemento de abajo a html :

 data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)' data-platform='Win32' 

Permitir selectores de CSS muy orientados, por ejemplo:

 html[data-useragent*='Chrome/13.0'] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; } 

Nota

Si es posible, identifique y solucione cualquier problema sin cortes. Admite mejora progresiva y degradación elegante . Sin embargo, este es un escenario de “mundo ideal” que no siempre se puede obtener, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.


Atribución / lectura esencial

  • Jeff Clayton | Browserhacks.com
  • Keith Clarke
  • Paul Irish
  • Web Devout
  • La llave

Aquí hay una solución de dos pasos aquí es un truco para IE10 y 11

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ } 

porque IE10 e IE11 admiten -ms-high-cotrast puede aprovechar esta ventaja para apuntar a estos dos navegadores

y si quiere excluir el IE10 de esto, debe crear un código específico de IE10 ya que sigue el truco de agente de usuario, debe agregar este Javascript

 var doc = document.documentElement; doc.setAttribute('data-useragent', navigator.userAgent); 

y esta etiqueta HTML

  

y ahora puedes escribir tu código CSS como este

 html[data-useragent*='MSIE 10.0'] h1 { color: blue; } 

Para obtener más información, consulte estos sitios web, wil tutorail , Chris Tutorial


Y si quiere apuntar a IE11 y más tarde, esto es lo que he encontrado:

 _:-ms-fullscreen, :root .selector {} 

Aquí hay un gran recurso para obtener más información: browserhacks.com

He estado escribiendo esto y contribuyéndolos a BrowserHacks.com desde el otoño de 2013; este que escribí es muy simple y solo es compatible con IE 11.

  

y por supuesto, el div …

 
This is an Internet Explorer 11 CSS Hack

Así que el texto aparece en azul con Internet Explorer 11. Diviértete con él.

Más IE y otros scripts de navegador CSS en mi sitio de prueba en vivo aquí:

ACTUALIZADO: http://browserstrangeness.bitbucket.io/css_hacks.html

ESPEJO: http://browserstrangeness.github.io/css_hacks.html

(Si también está buscando MS Edge CSS Hacks, eso es a dónde ir).

Puede usar el siguiente código dentro de la etiqueta de estilo:

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ } 

A continuación hay un ejemplo que funcionó para mí:

  

Tenga en cuenta que dado que (#nav li) y (#nav a) están fuera de la pantalla @media …, son estilos generales.

Puede usar js y agregar una clase en html para mantener el estándar de comentarios condicionales :

  var ua = navigator.userAgent, doc = document.documentElement; if ((ua.match(/MSIE 10.0/i))) { doc.className = doc.className + " ie10"; } else if((ua.match(/rv:11.0/i))){ doc.className = doc.className + " ie11"; } 

O use un lib como bowser:

https://github.com/ded/bowser

O modernizr para la detección de características:

http://modernizr.com/

Así que al final encontré mi propia solución a este problema.

Después de buscar en la documentación de Microsoft , logré encontrar un nuevo estilo de IE11 solo msTextCombineHorizontal

En mi prueba, compruebo los estilos IE10 y si son una coincidencia positiva, entonces busco el estilo IE11. Si lo encuentro, entonces es IE11 +, si no lo hago, entonces es IE10.

Ejemplo de código: Detectar IE10 e IE11 mediante CSS Capability Testing (JSFiddle)

Actualizaré el ejemplo de código con más estilos cuando los descubra.

NOTA: Es casi seguro que esto identificará IE12 e IE13 como “IE11”, ya que esos estilos probablemente continuarán. Agregaré más pruebas a medida que aparezcan nuevas versiones, y espero que pueda confiar nuevamente en Modernizr.

Estoy usando esta prueba para el comportamiento alternativo. El comportamiento alternativo es un estilo menos glamoroso, no tiene una funcionalidad reducida.

Me pareció útil

    

Agregue esto debajo de su documento