Wenden Sie den Stil NUR im IE an

183

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?

Überholspur
quelle
1
Warum versuchst du das zu tun? Auf welche Version (en) von IE zielen Sie ab? Was ist mit IE10? (unterstützt nicht die üblichen bedingten Kommentare)
dreißig Punkte
Ich versuche, IE 7, 8 und 9 zu zielen.
FastTrack
Welchen Grund könnten Sie haben, IE9 als Ziel zu wählen, aber nicht IE10? Ich würde gerne wissen ...
dreißig Punkte
1
IE interpretiert width: autoBlockelemente nicht so wie andere Browser wie Firefox oder Chrome. In Chrome / Firefox width:autowird die Breite eines Blockelements um die volle Breite seines Containers erweitert. IE tut dies nicht und erfordertwidth: 100%
FastTrack
1
Hat jemand das versucht? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css
Pramesh Bajracharya

Antworten:

102

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.

James Allardice
quelle
10
Gibt es eine Möglichkeit, diesen bedingten Kommentar in meiner CSS-Datei zu verwenden? Ich wollte vermeiden, mein HTML zu überladen, wenn ich helfen könnte.
FastTrack
2
@FastTrack - Nein, bedingte Kommentare sind HTML-Kommentare, daher müssen sie in Ihrem Markup angezeigt werden. Ich neige dazu, ein ganz neues Stylesheet nur für den Internet Explorer zu erstellen und es dann wie gewohnt in die bedingten Kommentare aufzunehmen.
James Allardice
James: Ich habe darüber nachgedacht, aber dann muss ich jedes Mal, wenn ich etwas ändern möchte, zwei separate Stylesheets aktualisieren, oder?
FastTrack
3
@FastTrack - Nein, Ihr IE-Stylesheet enthält nur IE-spezifische Stile. Fügen Sie es nach Ihrem Haupt-Stylesheet ein, damit Sie die in Ihrem Haupt-Stylesheet festgelegten Stile bei Bedarf überschreiben können. Sie müssten es also nur aktualisieren, wenn Sie etwas Spezielles für den Internet Explorer ändern möchten.
James Allardice
1
@FastTrack - Ja. Wenn etwas in mehr als einem Stylesheet angegeben ist, hat das später enthaltene Vorrang.
James Allardice
283
@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.

Himanshu Dwivedi
quelle
6
nur funktioniert es nicht auf neuem internet-explorer (edge), muss es auch ohne ms hinzufügen
Saad Ahmed
6
Siehe hier für die Zielkante
Phyllis Sutherland
6
@ SaadAhmed: Ist das eigentlich ein Problem? Edge ist ein einigermaßen gut erzogener Browser, der sowieso viel besser als der IE ist, so dass viele IE-Hacks wahrscheinlich nicht notwendig (oder umsichtig) sind.
Michael Scheper
1
Nun, das hat meine dummen IE-Probleme gelöst. Danke für die Fehlerbehebung!
Jester
1
@MichaelScheper Dieser im ersten Kommentar gepostete Fehler gilt immer noch in der neuesten Version (17 für heute). Saads kleine Lösung half mir, diese Eigenart zu beseitigen.
SimonRabbit
54

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; }
}
Oriol
quelle
1
Ich bin versucht , \9und \0/für displayeine Klassenauswahl, aber beide werden auf IE10 als auch anzuwenden. Gibt es eine Möglichkeit, sich nur für IE9 zu bewerben [und darunter oder nicht]?
Tom Brito
Sie können es versuchen \0/IE9, haben es aber noch nicht getestet. Ansonsten kenne ich keine andere Möglichkeit, auf IE9 abzuzielen, es sei denn, Sie verwenden Bedingungsklauseln:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
Oriol
1
Der @media screen and (min-width:0\0) {Hack scheint auch von IE11 analysiert zu werden - es sind also nicht nur 9 und 10 -, bitte überprüfen Sie Ihre Kommentare und aktualisieren Sie sie.
Rolf
Ich habe @ media-Bildschirm und (-ms-hoher Kontrast: aktiv), (-ms-hoher Kontrast: keine) {} verwendet. Es hat gut funktioniert.
Harsimer
43

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; }
 }
Santosh Khalse
quelle
Beachten Sie, dass die letzte Liste ( min-width:0\0) auch für IE11
CBarr
26

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.

frontendzzzguy
quelle
Dies scheint keine Auswirkung in IE9
FastTrack
Ich verstehe nicht, warum nicht, versuchen Sie es mit .ie9 .actual-form table {width: 100%} in Ihrem CSS. Hoffentlich funktioniert das bei Ihnen.
Frontendzzzguy
.ie9funktioniert nicht, weil es seit 2010 nicht mehr aktualisiert wurde.
Hanna
Dies ist definitiv der eleganteste Ansatz. Persönlich ziehe ich es vor, beim Rendern der Seite die Server-Seite des Browser-CSS-Selektors hinzuzufügen.
opsb
1
Dies funktioniert, wenn Sie Agentenzeichenfolgen verwenden und die Selektorklasse dynamisch zum Body hinzufügen.
Pikapika
6

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.

Elad Silber
quelle
6

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 */
}
osouthgate
quelle
5

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

Akash
quelle
4

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.

Pykler
quelle
Der letzte gilt auch für IE11
CBarr
2

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

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

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

Rahi.Shah
quelle
Ich weiß, dass dies ein Nekrokomment ist, aber das sieht super schick aus. Ich bin mir jedoch nicht sicher, was genau es tut, da es ein bisschen arkan / byzantinisch aussieht. Kennt jemand die Semantik dieser Aussage? (wie das _ :: und das \ 0 am Ende?)
Adam R. Turner
1
Wendet
2
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

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; }
Srinivasan N.
quelle