Applica lo stile SOLO su IE

Ecco il mio blocco di 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;
}

Voglio solo IE 7, 8 e 9 per "vedere" width: 100%

Qual è il modo più semplice per raggiungere questo obiettivo?

Aggiornamento 2017

A seconda dell'ambiente, i commenti condizionali sono stati ufficialmente deprecati e rimossi in IE10 +.

Originale

Il modo più semplice è probabilmente usare un commento condizionale di Internet Explorer nel tuo HTML:

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

Esistono numerosi hack (ad esempio l' hack di sottolineatura ) che puoi utilizzare per indirizzare solo IE all'interno del tuo foglio di stile, ma diventa molto complicato se vuoi scegliere come target tutte le versioni di IE su tutte le piattaforme.

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

Spiegazione: È una query multimediale specifica di Microsoft. Utilizzando la proprietà -ms-high-contrast specifica per Microsoft IE, verrà analizzato solo in Internet Explorer 10 o versioni successive. Ho usato entrambi i valori validi della media query, quindi verrà analizzata solo da IE, indipendentemente dal fatto che l'utente abbia abilitato il contrasto elevato o meno.

Oltre ai commenti condizionali di IE, questo è un elenco aggiornato su come indirizzare IE6 a IE10.

Vedi specifici hack CSS e JS oltre a 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; }
}

Esistono vari hack disponibili per IE

Utilizzo dei commenti condizionali con foglio di stile

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

Utilizzo dei commenti condizionali con la sezione head css

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

Utilizzo di commenti condizionali con elementi HTML

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

Utilizzo di media query

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

Oltre a un commento condizionale, puoi anche utilizzare il selettore browser CSS http://rafael.adm.br/css_browser_selector/ poiché ciò ti consentirà di scegliere come target browser specifici. È quindi possibile impostare il CSS come

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

Ciò ti consentirà anche di scegliere come target browser specifici all'interno del tuo foglio di stile principale senza la necessità di commenti condizionali.

Penso che per la migliore pratica dovresti scrivere una dichiarazione condizionale di IE all'interno del <head>tag che all'interno ha un link al tuo speciale foglio di stile. Questo DEVE ESSERE dopo il tuo link css personalizzato in modo da sovrascrivere quest'ultimo, ho un piccolo sito quindi uso lo stesso vale a dire css per tutte le pagine.

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

questo differisce dalla risposta di James come penso (opinione personale perché lavoro con un team di designer e non voglio che tocchino i miei file html e rovinino qualcosa lì) non dovresti mai includere gli stili nel tuo file html.

Un po 'in ritardo su questo, ma questo ha funzionato perfettamente per me quando ho cercato di nascondere lo sfondo per 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;
}

Ho ricevuto questo trucco tramite: 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 */
}

Benvenuto BrowserDetect - una funzione fantastica.

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

Il Object BrowserDetect fornisce anche versioninformazioni in modo che possiamo aggiungere classi specifiche - ad es. $('*').addClass('ie9');se (BrowserDetect.version == 9).

In bocca al lupo....

Dipende molto dalle versioni di IE ... Ho trovato questa eccellente risorsa aggiornata da IE6-10 :

CSS hack per Internet Explorer 6

Si chiama Star HTML Hack e ha il seguente aspetto:

• html .color {color: # F00;} Questo hack utilizza CSS completamente valido.

CSS hack per Internet Explorer 7

Si chiama Star Plus Hack.

*: first-child + html .color {color: # F00;} O una versione più breve:

* + html .color {color: # F00;} Come l'hacking HTML stella, utilizza CSS valido.

CSS hack per Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Questo hack non utilizza CSS valido.

CSS hack per Internet Explorer 9

: root .color {color: # F00 \ 9;} Anche questi hack non usano CSS validi.

Aggiunto il 2013.02.04: Sfortunatamente IE10 comprende questo trucco.

CSS hack per Internet Explorer 10

@media screen e (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Anche questi hack non usano CSS validi.

Per / * Internet Explorer 9+ (one-liner) * /

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

Solo questa soluzione funziona perfettamente per me.

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

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

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

Questo funziona su Edge e su tutti gli IE

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