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

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
• http://www.webdevout.net/css-hacks
• La llave

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