วิธีกำหนดเป้าหมายเฉพาะ IE (รุ่นใดก็ได้) ภายในสไตล์ชีท?

ฉันมีโครงการที่สืบทอดมาและมีสถานที่ที่เป็นระเบียบที่สุด นี่คือหนึ่งในนั้น ฉันต้องการกำหนดเป้าหมายเฉพาะ IE (ทุกรุ่น)

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

เพื่อให้ชัดเจน: ภายในสไตล์ชีทที่ฝังตัวและไม่มีการเพิ่ม ID หรือคลาสในแท็กใน html ฉันต้องใช้สไตล์เส้นขอบเฉพาะเมื่อผู้ใช้ใช้ IE ฉันจะทำสิ่งนี้ได้อย่างไร

แก้ไข: พบโซลูชันสำหรับ Firefox แก้ไขคำถามเพื่อแสดงถึงสิ่งนี้

Internet Explorer 9 หรือต่ำกว่า: คุณสามารถใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อโหลดสไตล์ชีทเฉพาะ IE สำหรับเวอร์ชันใด ๆ (หรือการรวมกันของเวอร์ชัน) ที่คุณต้องการกำหนดเป้าหมายเฉพาะเช่นด้านล่างโดยใช้สไตล์ชีทภายนอก

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

อย่างไรก็ตามการเริ่มต้นในเวอร์ชัน 10 ความคิดเห็นแบบมีเงื่อนไขไม่ได้รับการสนับสนุนใน IE อีกต่อไป

Internet Explorer 10 & 11: สร้างแบบสอบถามสื่อโดยใช้ -ms-high-contrast ซึ่งคุณวางสไตล์ IE 10 และ 11 เฉพาะ CSS ของคุณ เนื่องจาก -ms-high-contrast เป็นแบบเฉพาะของ Microsoft (และใช้ได้เฉพาะใน IE 10+) เท่านั้นจึงจะถูกแยกวิเคราะห์ใน Internet Explorer 10 ขึ้นไป

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

Microsoft Edge 12:สามารถใช้กฎ @supports นี่คือลิงค์ที่มีข้อมูลทั้งหมดเกี่ยวกับกฎนี้

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

การตรวจจับกฎ IE8 แบบอินไลน์

ฉันมีตัวเลือกอีก 1 ตัว แต่จะตรวจพบ IE8 และรุ่นที่ต่ำกว่าเท่านั้น

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

เมื่อคุณพูดถึงสไตล์ชีตที่ฝังไว้ ฉันคิดว่าคุณต้องใช้แบบสอบถามสื่อและแสดงความคิดเห็นเงื่อนไขสำหรับรุ่นด้านล่าง

ต่อไปนี้เป็นคอลเลกชันของแบบสอบถามสื่อที่จะช่วยให้คุณทำเช่นนั้นสำหรับ Internet Explorer ทุกรุ่น (จาก IE6 ถึง IE11 +), Firefox, Chrome & Safari (แก้ไข: เพิ่ม Opera ด้วย)

IE 6

* html .ie6 { property: value; }

หรือ

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

หรือ

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

IE 6 และ 7

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

หรือ

.ie67 { *property: value; }

หรือ

.ie67 { #property: value; }

IE 6, 7 และ 8

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

IE 8

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

หรือ

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

โหมดมาตรฐาน IE 8

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

IE 8,9 และ 10

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

IE 9 เท่านั้น

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

IE 9 ขึ้นไป

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

IE 9 และ 10

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

IE 10 เท่านั้น

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

IE 10 ขึ้นไป

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

หรือ

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

IE 11 (ขึ้นไป .. )

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

Firefox (ทุกรุ่น)

@-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 (ก่อนหน้า)

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

Webkit (Chrome & Safari ทุกรุ่น)

@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 ถึง 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; 
        }
    }
}

โอเปร่า (12+)

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

Opera (11 ขึ้นไป)

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

สำหรับข้อมูลเพิ่มเติมหรือแบบสอบถามสื่อเพิ่มเติมโปรดเยี่ยมชมเว็บไซต์browserhacks.comและ / หรือดูบทความในบล็อกนี้ที่ฉันเขียนไว้ในหัวข้อนี้

เมื่อใช้SASSฉันใช้ 2 ต่อไปนี้@media queriesเพื่อกำหนดเป้าหมาย 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/

แก้ไข

ฉันยังกำหนดเป้าหมายรุ่นที่ใหม่กว่าของ EDGE โดยใช้@support queries(เพิ่มมากเท่าที่คุณต้องการ)

@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 ในสไตล์ชีตของฉันฉันใช้ Sass Mixin นี้:

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

อีกวิธีการแก้ปัญหาสำหรับการใส่สไตล์เฉพาะของ IE ก็คือ

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

จากนั้นตัวเลือกของคุณ

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

หลังจากประสบปัญหากับเว็บไซต์ที่ใช้งาน Edge เมื่อใช้ High Contrast Mode ฉันได้พบกับงานต่อไปนี้ของ Jeff Clayton:

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

มันเป็นคำสืบค้นสื่อที่แปลกประหลาด แต่ก็ใช้งานได้ง่ายกว่าใน Sass:

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

เป้าหมายนี้คาดหวังรุ่น IE สำหรับ IE8

หรือคุณสามารถใช้:

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

เป้าหมายใดที่ IE8-11 แต่ยังเป็นต้นเหตุให้ FireFox 1.x (สำหรับกรณีการใช้งานของฉันไม่สำคัญ)

ตอนนี้ฉันกำลังทดสอบด้วยการสนับสนุนการพิมพ์และดูเหมือนว่าจะใช้ได้ดี:

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