Bir stil sayfasında yalnızca IE (herhangi bir sürüm) nasıl hedeflenir?

Devralınan bir projem var ve bunun tamamen dağınık olduğu yerler var. Bu onlardan biri. Sadece IE (herhangi bir sürüm) hedef gerekir.

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

Açıklamak gerekirse: İçinde gömülü stil ve olmadan html etiketlerine kimliklerini veya sınıfları ekleyerek, ben sınır stilini uygulamak gerekir sadece kullanıcı IE kullanarak eğer. Bunu nasıl yapabilirim?

Düzenle: Firefox için soruyu düzenleyerek soruyu düzenleyen bir çözüm bulundu.

Internet Explorer 9 ve önceki sürümleri: Aşağıdaki harici stil sayfasını kullanarak özellikle hedeflemek istediğiniz herhangi bir sürüm (veya sürüm birleşimi) için IE'ye özgü bir stil sayfası yüklemek için koşullu yorumları kullanabilirsiniz.

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

Ancak, sürüm 10'dan başlayarak, IE'de koşullu yorumlar artık desteklenmemektedir.

Internet Explorer 10 ve 11: IE 10 ve 11'e özgü CSS stillerini yerleştirdiğiniz -ms-high-contrast kullanarak bir ortam sorgusu oluşturun. -Ms-high-contrast Microsoft'a özgü (ve yalnızca IE 10+ sürümünde) olduğundan, yalnızca Internet Explorer 10 ve sonraki sürümlerinde ayrıştırılır.

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

Microsoft Edge 12: @supports kuralını kullanabilir İşte bu kuralla ilgili tüm bilgileri içeren bir bağlantı

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

Satır içi kural IE8 algılama

Ben 1 seçenek daha var ama sadece IE8 ve altı sürümü tespit olduğunu.

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

Gömülü stil sayfası için belirttiğiniz gibi. Aşağıdaki sürüm için medya sorgusu ve koşul açıklaması kullanmanız gerektiğini düşünüyorum.

İşte Internet Explorer'ın herhangi bir sürümü (IE6'dan IE11 +), Firefox, Chrome ve Safari (EDIT: Opera eklenmiştir) için bunu yapmanıza izin verecek bir medya sorguları koleksiyonu.

IE 6

* html .ie6 { property: value; }

veya

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

veya

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

IE 6 ve 7

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

veya

.ie67 { *property: value; }

veya

.ie67 { #property: value; }

IE 6, 7 ve 8

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

IE 8

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

veya

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

IE 8 Standartlar Modu

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

IE 8,9 ve 10

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

Yalnızca IE 9

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

IE 9 ve üstü

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

IE 9 ve 10

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

Yalnızca IE 10

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

IE 10 ve üstü

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

veya

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

IE 11 (ve üstü ..)

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

Firefox (herhangi bir sürüm)

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

Firefox (Yalnızca Quantum / Stylo)

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

Firefox Eski (Stylo öncesi)

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

Webkit (Chrome ve Safari, herhangi bir sürüm)

@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 (6,1'den 10,0'a)

@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 ve altı)

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

Daha fazla bilgi veya medya sorguları için browserhacks.com web sitesini ziyaret edin ve / veya bu konuda yazdığım bu blog yayınına göz atın .

Kullanırken IE 6-10 ve EDGE hedeflemek SASSiçin aşağıdaki 2 @media querieskullanın.

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

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

Düzenle

Ayrıca EDGE'nin sonraki sürümlerini de hedefliyorum @support queries(ihtiyacınız kadar ekleyin)

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

IE'yi yalnızca stil sayfalarımda hedeflemek için bu Sass Mixin'i kullanıyorum:

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

IE'ye özgü stil için bir başka çalışma çözümü

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

Ve sonra seçiciniz

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

Yüksek Karşıtlık Modu'nu kullanırken Edge'de kırılan sitelerle ilgili sorunlar yaşadıktan sonra Jeff Clayton'ın şu çalışmalarına rastladım:

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

Bu çılgınca, garip bir medya sorgusu, ancak bunlar Sass'ta kullanımı daha kolay:

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

Bu, IE sürümlerinin IE8 için beklediğini hedefler.

Veya şunları kullanabilirsiniz:

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

IE8-11'i hedefleyen, ancak FireFox 1.x'i de tetikler (benim kullanım durumum için önemli değil).

Şu anda baskı desteği ile test ediyorum ve bu iyi çalışıyor gibi görünüyor:

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