Wenden Sie den Stil NUR im IE an

Hier ist mein CSS-Block:

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

Ich möchte nur, dass IE 7, 8 und 9 "sehen" width: 100%

Was ist der einfachste Weg, um dies zu erreichen?

Update 2017

Abhängig von der Umgebung wurden bedingte Kommentare in IE10 + offiziell abgelehnt und entfernt .

Original

Am einfachsten ist es wahrscheinlich, einen bedingten Kommentar im Internet Explorer in Ihrem HTML-Code zu verwenden:

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

Es gibt zahlreiche Hacks (z. B. den Unterstrich-Hack ), mit denen Sie nur den IE in Ihrem Stylesheet als Ziel festlegen können. Es wird jedoch sehr chaotisch, wenn Sie alle Versionen des IE auf allen Plattformen als Ziel festlegen möchten.

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

Erläuterung: Es handelt sich um eine Microsoft-spezifische Medienabfrage. Wenn Sie die für Microsoft IE spezifische Eigenschaft -ms-kontrastreich verwenden, wird sie nur in Internet Explorer 10 oder höher analysiert. Ich habe beide gültigen Werte der Medienabfrage verwendet, sodass sie nur vom IE analysiert wird, unabhängig davon, ob für den Benutzer ein hoher Kontrast aktiviert ist oder nicht.

Abgesehen von den bedingten IE-Kommentaren ist dies eine aktualisierte Liste, wie IE6 auf IE10 ausgerichtet werden kann.

Siehe spezifische CSS- und JS-Hacks außerhalb des 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; }
}

Für IE sind mehrere Hacks verfügbar

Verwenden von bedingten Kommentaren mit Stylesheet

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

Verwenden von bedingten Kommentaren mit Kopfabschnitt CSS

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

Verwenden von bedingten Kommentaren mit HTML-Elementen

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

Medienabfrage verwenden

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

Neben einem bedingten Kommentar kann auch die CSS-Browserauswahl http://rafael.adm.br/css_browser_selector/ verwendet werden, da Sie so auf bestimmte Browser abzielen können. Sie können dann Ihr CSS als festlegen

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

Auf diese Weise können Sie auch bestimmte Browser in Ihrem Haupt-Stylesheet ansprechen, ohne dass bedingte Kommentare erforderlich sind.

Ich denke, für die beste Vorgehensweise sollten Sie eine bedingte IE-Anweisung in das <head>Tag schreiben , das einen Link zu Ihrem speziellen, dh Stylesheet enthält. Diese muss nach dem benutzerdefinierten CSS Link , damit es die letztere überschreibt, ich habe eine kleine Website , so dass ich die gleiche dh CSS für alle Seiten.

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

Dies unterscheidet sich von James Antwort, wie ich denke (persönliche Meinung, weil ich mit einem Designer-Team zusammenarbeite und nicht möchte, dass sie meine HTML-Dateien berühren und dort etwas durcheinander bringen). Sie sollten niemals Stile in Ihre HTML-Datei aufnehmen.

Ein bisschen spät, aber das hat perfekt funktioniert, als ich versucht habe, den Hintergrund für IE6 & 7 zu verbergen

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

Ich habe diesen Hack erhalten über: 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 */
}

Willkommen BrowserDetect - eine großartige Funktion.

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

Der Object BrowserDetect bietet auch versionInformationen, damit wir bestimmte Klassen hinzufügen können - zum Beispiel. $('*').addClass('ie9');wenn (BrowserDetect.version == 9).

Viel Glück....

Es hängt wirklich von den IE-Versionen ab ... Ich habe diese hervorragende Ressource gefunden, die von IE6-10 auf dem neuesten Stand ist :

CSS-Hack für Internet Explorer 6

Es heißt Star HTML Hack und sieht wie folgt aus:

• html .color {color: # F00;} Dieser Hack verwendet vollständig gültiges CSS.

CSS-Hack für Internet Explorer 7

Es heißt Star Plus Hack.

*: Erstes Kind + HTML .color {Farbe: # F00;} Oder eine kürzere Version:

* + html .color {color: # F00;} Wie beim Star-HTML-Hack wird auch hier gültiges CSS verwendet.

CSS-Hack für Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Dieser Hacks verwendet kein gültiges CSS.

CSS-Hack für Internet Explorer 9

: root .color {color: # F00 \ 9;} Dieser Hacks verwendet auch kein gültiges CSS.

Hinzugefügt am 04.02.2013: IE10 versteht diesen Hack leider.

CSS-Hack für Internet Explorer 10

@media screen und (-ms-kontrastreich: aktiv), (-ms-kontrastreich: keine) {.color {color: # F00;}} Diese Hacks verwenden auch kein gültiges CSS.

Für / * Internet Explorer 9+ (einzeilig) * /

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

Nur diese Lösung funktioniert perfekt für mich.

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

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

Für 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;
  }
}

Dieser funktioniert auf Edge und allen IEs

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