Jak kierować TYLKO IE (dowolną wersję) w arkuszu stylów?

Mam odziedziczony projekt i są miejsca, w których jest totalny bałagan. To jeden z nich. Muszę kierować TYLKO IE (dowolną wersję). 

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

Aby było jasne: wewnątrz osadzonego arkusza stylów i Bez dodawania ID ' ów lub klas do znaczników w html, muszę zastosować styl obramowania tylko jeśli użytkownik używa IE. Jak mogę to zrobić?

Edit: znalazłem rozwiązanie dla Firefoksa, edytując pytanie, aby odzwierciedlić to.

 105
css3
Author: MetalPhoenix, 2015-02-09
Source

4 answers

Internet Explorer 9 i niższe: Możesz użyć komentarzy warunkowych, aby załadować arkusz stylów specyficznych dla IE dla dowolnej wersji (lub kombinacji wersji), do której chcesz konkretnie trafić.jak poniżej używając zewnętrznego arkusza stylów.

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

Jednak, począwszy od wersji 10, komentarze warunkowe nie są już obsługiwane w IE.

Internet Explorer 10 & 11: Utwórz Zapytanie o media używając -ms-high-contrast, w którym umieszczasz style CSS specyficzne dla IE 10 i 11. Ponieważ-ms-high-contrast jest specyficzne dla Microsoft (i dostępne tylko w IE 10+), będzie przetwarzane tylko w Internet Explorer 10 i nowszych.

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

Microsoft Edge 12: może używać reguły @ supports Oto link ze wszystkimi informacjami o tej zasadzie 

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

inline rule IE8 detection

Mam jeszcze 1 opcję, ale jest to tylko wersja IE8 i poniżej.

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

Jak określiłeś dla embeded stylesheet. Myślę, że musisz użyć Zapytanie o media i komentarz warunkowy dla poniższej wersji.

 251
Author: Jay Patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-26 17:02:12

Oto zbiór zapytań o media, które pozwolą ci to zrobić dla dowolnej wersji Internet Explorer( od IE6 do IE11+), Firefox, Chrome & Safari (EDIT: dodano również operę).

IE 6 

* html .ie6 { property: value; }

Lub 

.ie6 { _property: value; }

IE 7 

*+html .ie7 { property: value; }

Lub 

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

IE 6 i 7 

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

Lub 

.ie67 { *property: value; }

Lub 

.ie67 { #property: value; }

IE 6, 7 i 8 

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

IE 8

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

Lub 

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

IE 8 Standards Mode 

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

IE 8,9 i 10 

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

TYLKO IE 9 

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

IE 9 i wyżej 

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

IE 9 i 10 

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

TYLKO IE 10 

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

IE 10 i wyżej 

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

Lub 

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

IE 11 (i wyżej..)

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

Firefox (dowolny wersja) 

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

Firefox (Quantum Only / 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, dowolna wersja) 

@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 (od 6.1 do 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; 
        }
    }
}

Opera (12+)

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

Opera (11 i niżej) 

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

Aby uzyskać więcej informacji lub dodatkowych zapytań o media, Odwiedź browserhacks.com Strona WWW i / lub przeczytaj ten post.

 22
Author: Darkseal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-29 18:02:11

Podczas korzystania z SASS używam następujących 2 @media queries do kierowania IE 6-10 & EDGE.

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

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

Edit

Kieruję również późniejsze wersje EDGE używając @support queries (Dodaj tyle, ile potrzebujesz) 

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

 11
Author: minlare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-08 08:06:05

Innym rozwiązaniem roboczym dla stylizacji specyficznej dla IE jest 

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

A potem twój selektor 

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }
 0
Author: Sahib Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-12 04:50:08