Wie kann nur IE (eine beliebige Version) in einem Stylesheet als Ziel ausgewählt werden?

Ich habe ein geerbtes Projekt und es gibt Orte, an denen es ein völliges Durcheinander ist. Dies ist einer von ihnen. Ich muss nur auf IE (jede Version) abzielen.

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

Um es klar auszudrücken : Innerhalb des eingebetteten Stylesheets und ohne IDs oder Klassen zu den Tags im HTML hinzuzufügen, muss ich den Rahmenstil nur anwenden, wenn der Benutzer IE verwendet. Wie kann ich das machen?

Bearbeiten: hat eine Lösung für Firefox gefunden und die Frage bearbeitet, um dies widerzuspiegeln.

Internet Explorer 9 und niedriger: Sie können bedingte Kommentare verwenden, um ein IE-spezifisches Stylesheet für jede Version (oder Kombination von Versionen) zu laden, auf die Sie speziell abzielen möchten.

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

Ab Version 10 werden bedingte Kommentare im IE jedoch nicht mehr unterstützt.

Internet Explorer 10 und 11: Erstellen Sie eine Medienabfrage mit -ms-hohem Kontrast, in der Sie Ihre IE 10- und 11-spezifischen CSS-Stile platzieren. Da -ms-hoher Kontrast Microsoft-spezifisch ist (und nur in IE 10+ verfügbar ist), wird es nur in Internet Explorer 10 und höher analysiert.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12: Kann die @ support-Regel verwenden. Hier ist ein Link mit allen Informationen zu dieser Regel

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline-Regel IE8-Erkennung

Ich habe 1 weitere Option, aber es wird nur IE8 und eine niedrigere Version erkannt.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

Wie Sie für das eingebettete Stylesheet angegeben haben. Ich denke, Sie müssen Medienabfrage und Bedingungskommentar für die folgende Version verwenden.

Hier ist eine Sammlung von Medienabfragen, mit denen Sie dies für jede Version von Internet Explorer (von IE6 bis IE11 +), Firefox, Chrome und Safari (BEARBEITEN: auch Opera hinzugefügt) ausführen können.

IE 6

* html .ie6 { property: value; }

oder

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

oder

*:first-child+html .ie7 { property: value; }

IE 6 und 7

@media screen\9 { 
    .ie67 {
        property: value; 
    }
}

oder

.ie67 { *property: value; }

oder

.ie67 { #property: value; }

IE 6, 7 und 8

@media \0screen\,screen\9 {
    .ie678 {
        property: value;
    }
}

IE 8

html>/**/body .ie8 { property: value; }

oder

@media \0screen {
    .ie8 {
        property: value;
    }
}

IE 8-Standardmodus

.ie8 { property /*\**/: value\9 }

IE 8,9 und 10

@media screen\0 {
    .ie8910 {
        property: value;
    }
}

Nur IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
    // IE9 CSS
    .ie9{
        property: value;
    }
}

IE 9 und höher

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up { 
        property: value; 
    }
}

IE 9 und 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

Nur IE 10

_:-ms-lang(x), .ie10 { property: value\9; }

IE 10 und höher

_:-ms-lang(x), .ie10up { property: value; }

oder

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        property:value;
    }
}

IE 11 (und höher ..)

_:-ms-fullscreen, :root .ie11up { property: value; }

Firefox (jede Version)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

Firefox (nur Quantum / Stylo)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

Firefox Legacy (Pre-Stylo)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

Webkit (Chrome & Safari, jede Version)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;
}

Google Chrome (29+)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

Safari (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;
}

Safari (von 6.1 bis 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

Safari (10.1+)

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

Oper (12+)

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    } 
}

Oper (11 und niedriger)

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}

Weitere Informationen oder zusätzliche Medienanfragen finden Sie auf der Website browserhacks.com und / oder in diesem Blogbeitrag , den ich zu diesem Thema verfasst habe.

Bei der Verwendung verwende SASSich die folgenden 2, @media queriesum auf IE 6-10 & EDGE abzuzielen.

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

Bearbeiten

Ich ziele auch auf spätere Versionen von EDGE mit @support queries(fügen Sie so viele hinzu, wie Sie benötigen)

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Für die Ausrichtung auf IE nur in meinen Stylesheets verwende ich dieses Sass-Mixin:

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

Eine weitere funktionierende Lösung für das IE-spezifische Styling ist

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

Und dann dein Selektor

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

Nachdem ich im High Contrast-Modus Probleme mit Websites hatte, die auf Edge kaputt gingen, stieß ich auf die folgende Arbeit von Jeff Clayton:

https://browserstrangeness.github.io/css_hacks.html

Es ist eine verrückte, seltsame Medienabfrage, aber diese sind in Sass einfacher zu verwenden:

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

Dies zielt auf IE-Versionen ab, die für IE8 erwartet werden.

Oder Sie können verwenden:

@media screen\0 {
  .selector { rule: value };
}

Welches Ziel IE8-11, aber auch FireFox 1.x auslöst (was für meinen Anwendungsfall keine Rolle spielt).

Im Moment teste ich mit Druckunterstützung, und das scheint in Ordnung zu sein:

@media all\0 {
  .selector { rule: value };
}