Aplicar estilo SOLO en IE

Aquí está mi bloque de CSS:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

Solo quiero que IE 7, 8 y 9 "vean" width: 100%

¿Cuál es la forma más sencilla de lograr esto?

Actualización 2017

Dependiendo del entorno, los comentarios condicionales han sido oficialmente desaprobados y eliminados en IE10 +.

Original

Probablemente, la forma más sencilla es utilizar un comentario condicional de Internet Explorer en su HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

Hay numerosos hacks (por ejemplo, el hack de subrayado ) que puede usar que le permitirán apuntar solo a IE dentro de su hoja de estilo, pero se vuelve muy complicado si desea apuntar a todas las versiones de IE en todas las plataformas.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Explicación: es una consulta de medios específica de Microsoft. Usando la propiedad -ms-high-contrast específica de Microsoft IE, solo se analizará en Internet Explorer 10 o superior. He utilizado los dos valores válidos de la consulta de medios, por lo que IE solo la analizará, tanto si el usuario tiene habilitado el alto contraste como si no.

Además de los comentarios condicionales de IE, esta es una lista actualizada sobre cómo orientar IE6 a IE10.

Vea hacks específicos de CSS y JS más allá de IE .

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

Hay varios hacks disponibles para IE

Usar comentarios condicionales con hoja de estilo

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

Usar comentarios condicionales con la sección de encabezado css

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

Usar comentarios condicionales con elementos HTML

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Usar consulta de medios

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

Además de un comentario condicional, también podría usar el selector de navegador CSS http://rafael.adm.br/css_browser_selector/ ya que esto le permitirá dirigirse a navegadores específicos. Luego puede configurar su CSS como

.ie .actual-form table {
    width: 100%
    }

Esto también le permitirá apuntar a navegadores específicos dentro de su hoja de estilo principal sin la necesidad de comentarios condicionales.

Creo que, para las mejores prácticas, debe escribir una declaración condicional de IE dentro de la <head>etiqueta que dentro tiene un enlace a su hoja de estilo especial, es decir. Esto TIENE QUE SER después de su enlace css personalizado, por lo que anula el último, tengo un sitio pequeño, así que uso el mismo, es decir, css para todas las páginas.

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

Esto difiere de la respuesta de James como creo (opinión personal porque trabajo con un equipo de diseñadores y no quiero que toquen mis archivos html y estropeen algo allí). Nunca debe incluir estilos en su archivo html.

Un poco tarde en esto, pero esto funcionó perfectamente para mí al intentar ocultar el fondo para IE6 y 7

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

Obtuve este truco a través de: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}

Bienvenido BrowserDetect : una función increíble.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

El Object BrowserDetect también proporciona versioninformación para que podamos añadir clases específicas - por ej. $('*').addClass('ie9');si (BrowserDetect.version == 9).

Buena suerte....

Realmente depende de las versiones de IE ... Encontré este excelente recurso que está actualizado desde IE6-10 :

Hack CSS para Internet Explorer 6

Se llama Star HTML Hack y tiene el siguiente aspecto:

• html .color {color: # F00;} Este hack utiliza CSS completamente válido.

Hack CSS para Internet Explorer 7

Se llama Star Plus Hack.

*: first-child + html .color {color: # F00;} O una versión más corta:

* + html .color {color: # F00;} Al igual que el hack HTML estrella, este usa CSS válido.

Hack CSS para Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Este truco no utiliza CSS válido.

Hack CSS para Internet Explorer 9

: root .color {color: # F00 \ 9;} Este pirateo tampoco utiliza CSS válido.

Agregado 2013.02.04: Desafortunadamente IE10 entiende este truco.

Hack CSS para Internet Explorer 10

@media screen y (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Este pirateo tampoco utiliza CSS válido.

Para / * Internet Explorer 9+ (una línea) * /

_::selection, .selector { property:value\0; }

Solo esta solución funciona perfectamente para mí.

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}

Para IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

Este funciona en Edge y todos los IE

:-ms-lang(x), .selector { color: red; }