Làm cách nào để chỉ nhắm mục tiêu IE (bất kỳ phiên bản nào) trong biểu định kiểu?

Tôi có một dự án được kế thừa và có những nơi nó là một mớ hỗn độn. Đây là một trong số họ. Tôi chỉ cần nhắm mục tiêu IE (bất kỳ phiên bản nào).

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

Để rõ ràng: Bên trong biểu định kiểu được nhúng và không thêm ID hoặc các lớp vào các thẻ trong html, tôi chỉ cần áp dụng kiểu viền chỉ khi người dùng đang sử dụng IE. Tôi có thể làm cái này như thế nào?

Chỉnh sửa: tìm thấy một giải pháp cho Firefox, chỉnh sửa câu hỏi để phản ánh điều này.

Internet Explorer 9 trở xuống: Bạn có thể sử dụng các nhận xét có điều kiện để tải biểu định kiểu dành riêng cho IE cho bất kỳ phiên bản nào (hoặc kết hợp các phiên bản) mà bạn muốn nhắm mục tiêu cụ thể như bên dưới bằng cách sử dụng biểu định kiểu bên ngoài.

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

Tuy nhiên, bắt đầu từ phiên bản 10, các bình luận có điều kiện không còn được hỗ trợ trong IE.

Internet Explorer 10 & 11: Tạo truy vấn phương tiện bằng cách sử dụng độ tương phản cao -ms, trong đó bạn đặt các kiểu CSS cụ thể IE 10 và 11 của mình. Vì độ tương phản cao -ms là đặc trưng của Microsoft (và chỉ khả dụng trong IE 10+), nên nó sẽ chỉ được phân tích cú pháp trong Internet Explorer 10 trở lên.

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

Microsoft Edge 12: Có thể sử dụng quy tắc @supports Đây là liên kết với tất cả thông tin về quy tắc này

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

Phát hiện quy tắc nội tuyến IE8

Tôi có thêm 1 tùy chọn nhưng nó chỉ phát hiện phiên bản IE8 trở xuống.

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

Như bạn đã xác định cho biểu định kiểu nhúng. Tôi nghĩ bạn cần sử dụng truy vấn phương tiện và nhận xét điều kiện cho phiên bản bên dưới.

Đây là một tập hợp các truy vấn phương tiện sẽ cho phép bạn thực hiện điều đó cho bất kỳ phiên bản Internet Explorer nào (từ IE6 đến IE11 +), Firefox, Chrome & Safari (EDIT: cũng đã thêm Opera).

IE 6

* html .ie6 { property: value; }

hoặc là

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

hoặc là

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

IE 6 và 7

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

hoặc là

.ie67 { *property: value; }

hoặc là

.ie67 { #property: value; }

IE 6, 7 và 8

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

IE 8

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

hoặc là

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

Chế độ tiêu chuẩn IE 8

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

IE 8,9 và 10

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

Chỉ IE 9

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

IE 9 trở lên

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

IE 9 và 10

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

Chỉ IE 10

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

IE 10 trở lên

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

hoặc là

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

IE 11 (trở lên ..)

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

Firefox (mọi phiên bản)

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

Firefox (Chỉ lượng tử / Stylo)

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

Firefox Legacy (tiền chế)

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

Webkit (Chrome & Safari, mọi phiên bản)

@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 (từ 6.1 đến 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 trở xuống)

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

Để biết thêm thông tin hoặc truy vấn phương tiện bổ sung, hãy truy cập trang web browserhacks.com và / hoặc xem bài đăng blog này mà tôi đã viết về chủ đề này.

Khi sử dụng SASStôi sử dụng 2 @media queriesmục sau để nhắm mục tiêu 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/

Biên tập

Tôi cũng nhắm mục tiêu các phiên bản EDGE sau này bằng cách sử dụng @support queries(thêm bao nhiêu tùy ý)

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

Để chỉ nhắm mục tiêu IE trong biểu định kiểu của tôi, tôi sử dụng Sass Mixin này:

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

Một giải pháp làm việc khác cho kiểu dáng cụ thể của IE là

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

Và sau đó chọn của bạn

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

Sau khi gặp sự cố với các trang web bị hỏng trên Edge khi sử dụng Chế độ tương phản cao, tôi đã xem qua công việc sau đây của Jeff Clayton:

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

Đó là một truy vấn phương tiện kỳ ​​lạ, điên rồ, nhưng chúng dễ sử dụng hơn trong Sass:

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

Mục tiêu này phiên bản IE mong đợi cho IE8.

Hoặc bạn có thể sử dụng:

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

Mà nhắm mục tiêu IE8-11, nhưng cũng kích hoạt FireFox 1.x (đối với trường hợp sử dụng của tôi, không thành vấn đề).

Ngay bây giờ tôi đang thử nghiệm với hỗ trợ in và điều này dường như đang hoạt động tốt:

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