¿Cómo se dirige IE7 e IE8 con CSS válido?

Quiero apuntar a IE7 e IE8 con CSS compatible con W3C. A veces, la corrección de CSS para una versión no soluciona la otra. ¿Cómo puedo conseguir esto?

Apunta explícitamente a las versiones de IE sin hackear usando HTML y CSS

Utilice este enfoque si no quiere hacks en su CSS. Agregue una clase exclusiva del navegador al elemento para que pueda seleccionar en función del navegador más adelante.

Ejemplo

           

Luego, en su CSS, puede acceder muy estrictamente a su navegador de destino.

Ejemplo

 .ie6 body { border:1px solid red; } .ie7 body { border:1px solid blue; } 

Para obtener más información, consulte http://html5boilerplate.com/

Target versiones de IE con CSS “Hacks”

Más a su punto, aquí están los hacks que le permiten atacar las versiones de IE.

Use “\ 9” para apuntar a IE8 y abajo.
Use “*” para apuntar a IE7 y abajo.
Use “_” para apuntar a IE6.

Ejemplo:

 body { border:1px solid red; /* standard */ border:1px solid blue\9; /* IE8 and below */ *border:1px solid orange; /* IE7 and below */ _border:1px solid blue; /* IE6 */ } 

Actualización: objective IE10

IE10 no reconoce las instrucciones condicionales, por lo que puede usar esto para aplicar una clase “ie10” al elemento

       

Yo recomendaría buscar comentarios condicionales y hacer una hoja separada para los IE con los que tenga problemas.

   

La respuesta a tu pregunta

Una forma completamente válida para seleccionar todos los navegadores, pero IE8 e inferior está usando la pseudoclase :not() . Como las versiones IE 8 y siguientes no son compatibles con :not() , los selectores que lo contienen no se tienen en cuenta. Esto significa que podrías hacer algo como esto:

 p {color:red;} p:not([ie8min]) {color:blue;} 

Esto sigue siendo un CSS completamente válido, pero causa IE8 y menos para representar estilos diferentes (y también Opera <9.5 y Safari <3.2).

Otros trucos

Aquí hay una lista de todos los selectores de navegador CSS completamente válidos que pude encontrar, a excepción de algunos que parecen bastante redundantes, como los que seleccionan solo 1 tipo de navegador antiguo ( 1 , 2 ):

 /****** First the hacks that target certain specific browsers ******/ * html p {color:red;} /* IE 6- */ *+html p {color:red;} /* IE 7 only */ @media screen and (-webkit-min-device-pixel-ratio:0) { p {color:red;} } /* Chrome, Safari 3+ */ p, body:-moz-any-link {color:red;} /* Firefox 1+ */ :-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */ :-moz-any(html) p {color:red;} /* Firefox 4+ */ /****** And then the hacks that target all but certain browsers ******/ html> body p {color:green;} /* not: IE<7 */ head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */ html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */ html>/**/body p {color:green;} /* not: IE<8 */ body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */ :root p {color:green;} /* not: IE<9, Opera<9.5 */ body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */ 

Créditos y fonts:

Para obtener una lista más completa a partir de 2015:

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) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{property:value;} } 

IE 9 y superior

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

IE 9 y 10

 @media screen and (min-width:0) { .ie910{property:value;} } 

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

El 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) lo siguiente al elemento 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, evite la orientación del navegador. Identifique y solucione cualquier problema que identifique. Admite mejora progresiva y degradación elegante . Con esto en mente, este es un escenario de “mundo ideal” que no siempre se puede obtener en un entorno de producción, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.


Atribución / lectura esencial

  • Keith Clarke
  • Paul Irish
  • Web Devout
  • La llave

Bueno, en realidad no tiene que preocuparse de que el código IE7 no funcione en IE8 porque IE8 tiene modo de compatibilidad (puede hacer que las páginas sean iguales a IE7). Pero si todavía desea apuntar a diferentes versiones de IE, una forma que se ha hecho desde hace un tiempo es usar comentarios condicionales o comenzar su regla CSS con un * para apuntar a IE7 y abajo . O bien, podría prestar atención al agente de usuario en los servidores y crear un archivo CSS diferente basado en esa información.

El problema real no es IE8, sino los hacks que usa para versiones anteriores de IE.

IE8 está bastante cerca de ser compatible con los estándares, por lo que no debería necesitar ningún truco para eso, tal vez solo algunos ajustes. El problema es si estás usando algunos hacks para IE6 e IE7; Deberá asegurarse de que solo se apliquen a esas versiones y no a IE8.

Hice que el sitio web de nuestra empresa sea compatible con IE8 hace un tiempo. Lo único que realmente cambié fue agregar la metaetiqueta que le dice a IE que las páginas son compatibles con IE8 …

Lo hice usando Javascript. Agrego tres clases de CSS al elemento html:

 ie lte-ie lt-ie 

Entonces para IE7, agrega lte-ie7 , lte-ie7 …, lt-ie8

Aquí está el código de javascript:

 (function () { function getIEVersion() { var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/'); if (msie > 0) { // IE 10 or older => return version number return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } else if (trident > 0) { // IE 11 (or newer) => return version number var rv = ua.indexOf('rv:'); return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); } else { return NaN; } }; var ieVersion = getIEVersion(); if (!isNaN(ieVersion)) { // if it is IE var minVersion = 6; var maxVersion = 13; // adjust this appropriately if (ieVersion >= minVersion && ieVersion <= maxVersion) { var htmlElem = document.getElementsByTagName('html').item(0); var addHtmlClass = function (className) { // define function to add class to 'html' element htmlElem.className += ' ' + className; }; addHtmlClass('ie' + ieVersion); // add current version addHtmlClass('lte-ie' + ieVersion); if (ieVersion < maxVersion) { for (var i = ieVersion + 1; i <= maxVersion; ++i) { addHtmlClass('lte-ie' + i); addHtmlClass('lt-ie' + i); } } } } })(); 

A partir de entonces, utiliza la clase .ie css en su hoja de estilo tal como lo describe potench.

(Se utilizó la función detectIE de Mario en Comprobar si el usuario está utilizando IE con jQuery )

El beneficio de tener lte-ie8 y lt-ie8, etc. es que se puede orientar a todos los navegadores menores o iguales que IE9, es decir IE7 - IE9.