Aplicar estilo apenas no IE

Aqui está o meu bloco 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;
}

Eu quero apenas o IE 7, 8 e 9 para "ver" width: 100%

Qual é a maneira mais simples de conseguir isso?

Atualização 2017

Dependendo do ambiente, os comentários condicionais foram oficialmente reprovados e removidos no IE10 +.

Original

A maneira mais simples é provavelmente usar um comentário condicional do Internet Explorer no seu HTML:

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

Existem vários hacks (por exemplo, o sublinhado hack ) que você pode usar para segmentar apenas o IE na sua folha de estilo, mas fica muito confuso se você deseja direcionar todas as versões do IE em todas as plataformas.

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

Explicação: É uma consulta de mídia específica da Microsoft. Usando a propriedade -ms-high-contrast específica para o Microsoft IE, ela será analisada apenas no Internet Explorer 10 ou superior. Eu usei os dois valores válidos da consulta de mídia, para que ela seja analisada apenas pelo IE, independentemente de o usuário ter alto contraste ativado ou não.

Além dos comentários condicionais do IE, esta é uma lista atualizada de como direcionar o IE6 para o IE10.

Veja hacks específicos de CSS e JS além do 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; }
}

Existem vários hacks disponíveis para o IE

Usando comentários condicionais com folha de estilo

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

Usando comentários condicionais com a seção principal css

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

Usando comentários condicionais com elementos HTML

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

Usando consulta de mídia

 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; }
 }

Além de um comentário condicional, também é possível usar o Seletor de navegador CSS http://rafael.adm.br/css_browser_selector/, pois isso permitirá que você direcione navegadores específicos. Você pode então definir seu CSS como

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

Isso também permitirá que você direcione navegadores específicos na sua folha de estilo principal sem a necessidade de comentários condicionais.

Eu acho que, para as melhores práticas, você deve escrever uma declaração condicional do IE dentro da <head>tag que dentro tem um link para sua folha de estilo especial, ou seja. Isso tem que ser após o seu link css personalizado, para que substitua o último, eu tenho um site pequeno, então eu uso o mesmo, ou seja, css para todas as 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]-->

isso difere da resposta de James como eu penso (opinião pessoal porque trabalho com uma equipe de designers e não quero que eles toquem meus arquivos html e atrapalhem alguma coisa lá). Você nunca deve incluir estilos no seu arquivo html.

Um pouco tarde, mas isso funcionou perfeitamente para mim ao tentar ocultar o plano de fundo do IE6 e 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;
}

Eu obtive esse hack via: 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 */
}

Bem-vindo BrowserDetect - uma função incrível.

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

O Object BrowserDetect também fornece versioninformações para que possamos adicionar classes específicas - por exemplo, $('*').addClass('ie9');E se(BrowserDetect.version == 9) .

Boa sorte....

Realmente depende das versões do IE ... Encontrei este excelente recurso atualizado do IE6-10 :

Corte de CSS para o Internet Explorer 6

É chamado de Star HTML Hack e tem a seguinte aparência:

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

Corte de CSS para o Internet Explorer 7

É chamado de Star Plus Hack.

*: primeiro filho + html .color {color: # F00;} Ou uma versão mais curta:

* + html .color {color: # F00;} Como o hack de estrela em HTML, ele usa CSS válido.

Corte de CSS para o Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Este hacks não usa CSS válido.

Corte de CSS para o Internet Explorer 9

: root .color {color: # F00 \ 9;} Este hacks também não usa CSS válido.

Adicionado em 02.02.2013: Infelizmente, o IE10 entende esse hack.

Corte de CSS para o Internet Explorer 10

@media screen e (-ms-alto-contraste: ativo), (-ms-alto-contraste: nenhum) {.color {color: # F00;}} Este hacks também não usa CSS válido.

Para / * Internet Explorer 9+ (uma linha) * /

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

Somente esta solução funciona perfeitamente para mim.

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

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

Para o 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 no Edge e em todos os IEs

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