Як націлити лише IE (будь-яку версію) в таблиці стилів?

У мене є спадковий проект, і є місця, де це зовсім безлад. Це одна з них. Мені потрібно орієнтуватися лише на IE (будь-яку версію).

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

Щоб було зрозуміло: всередині вбудованої таблиці стилів і без додавання ідентифікаторів чи класів до тегів у html мені потрібно застосувати стиль межі лише у тому випадку, якщо користувач використовує IE. Як я можу це зробити?

Редагувати: знайшов рішення для Firefox, редагувавши питання, щоб відобразити це.

Internet Explorer 9 і новіших версій : ви можете використовувати умовні коментарі для завантаження специфічної IE таблиці стилів для будь-якої версії (або комбінації версій), яку ви хотіли спеціально target.like нижче за допомогою зовнішніх таблиць стилів.

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

Однак, починаючи з версії 10, умовні коментарі більше не підтримуються в IE.

Internet Explorer 10 і 11: Створіть медіа-запит, використовуючи -ms-high-контраст, в якому ви розміщуєте свої специфічні для IE 10 та 11-стилі CSS. Оскільки -ms-high-контраст є специфічним для 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 (EDIT: також додано 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 (лише для кванту / Stylo)

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

Спадщина Firefox (до стилю)

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

Вебкіт (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;
    }
}

Сафарі (7.1+)

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

Сафарі (від 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; 
        }
    }
}

Сафарі (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; 
        }
    } 
}

Опера (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 під час використання режиму з високим контрастом, я натрапив на наступну роботу Джеффа Клейтона:

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 };
}