Медиа-запросы не работают в конкретном IE-запросе

Question

Я пытаюсь использовать медиа-запросы только в одном браузере (IE), но ничего из того, что я пробовал, не работает.

Например:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Styles go here for IE */
    @media screen and (max-width: 700px) {
        .article {
            width: 100%!important;
        }
    }
 }

Я пытаюсь получить медиазапрос, который работает только для IE и ничего больше, но это не имеет никакого влияния.Я также попробовал:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}

Я добавил максимальную ширину в конец медиазапроса.

Если у кого-то есть подсказки, как выполнять медиазапросы для одного конкретного браузера, пожалуйста, дайте мнея знаю

Answer 1

Похоже, вы пытаетесь нацелиться на IE 10+, поэтому попробуйте использовать селектор all вместо селектора screen.

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

Если вы пытаетесь нацелиться на IE 9 илиниже вам необходимо загрузить условную таблицу стилей, например:

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

Подробнее об этом и других браузерах Microsoft можно узнать здесь:

как определить IEи Edge браузеры в CSS?

Answer 2

Вы разделили условия запятыми, а не ключевым словом and

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}