Как совместить разрешение с медиа-запросом, ориентированным только на IE 11 или выше?

Question

Я знаю этот возможный дублирующий вопрос. но мой сценарий другой . Я столкнулся с возможным SO решением, но ни одно из них не подходит для моей ситуации.

заключается в том, что любая возможная или действительная комбинация, подобная приведенной ниже, я пытаюсь объединить разрешение с медиа-запросом только с таргетингом IE 11 или выше.

Например:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {
      .want-my-css-here{

    }

} 

Я уже сделал медиа-запрос для общих целей, как показано ниже

@media only screen and (min-width:992px) and (max-width:1024px) {
   .some-example-class{
         ....
    }
}

, но в IE 11 мало что не работает правильно в определенном разрешении. Для этого у меня есть медиа-запрос для IE

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown {
        position: relative;
        display: block;
    }

    .dropdown-menu {
        top: 56%
    }
}

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

Именно то, что мне нужно .dropdown и .dropdown-menu должны работать в определенном разрешении IE.

Или, пожалуйста, скажите мне, как управлять этим через javascript / typcript. Может ли кто-нибудь помочь мне в этом?

Ниже комбинация не работает для меня

@media only screen and (min-width:992px) {
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .dropdown-menu {
            top: 36%
        }
    }
}

Спасибо

Answer 1

Ваш @media лог c неверен. Используйте and (max-width:1024px) and (min-width:992px) с обоими media features.

 @media  all and (-ms-high-contrast: none) and (min-width:992px)  and (max-width:1024px),
            (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {}

---

. Таким образом, вы можете решить эту проблему с помощью двух IE специфических c медиа-запросов.

Тело пурпурный на IE.

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background: purple;
            }
        }

Тело красное на IE, если ширина составляет от 1024 до 992 пикселей.

        @media  all and (-ms-high-contrast: none) and (max-width:1024px)  and (min-width:992px),
        (-ms-high-contrast: active) and (min-width:992px)   and (max-width:1024px) {
            body {
                background: red;
            }
        }

К вашему сведению:

Вы может вкладывать медиа-запрос, но IE 11 его не поддерживает.

Answer 2

Спасибо всем. я сам исправил проблему, из-за конфликта с пользовательскими css и bootstrap css

Answer 3

Я столкнулся с той же проблемой, поэтому, скорее используя медиазапросы, я определил браузер, используя javascript, а затем добавил определенный c класс к body, а затем применил свои стили, определяя их в этом классе.