IE поддержка! Обойти вложенные медиазапросы в IE? - PullRequest
Новая
       48

IE поддержка! Обойти вложенные медиазапросы в IE?

1 голос
/ 17 апреля 2020

Дело в том, что мой HTML / CSS выглядит великолепно и отзывчиво во всех браузерах - кроме IE (проверено только в IE11). По какой-то причине IE неправильно читает отступы, удерживающие текст на месте, поэтому я решил, что сделаю 

@media only screen and (max-width: 1200px) {

    /* some css stuff */

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        /* IE specific CSS within a max-width of 1200px*/
    }
}

для таргетинга на браузер, что прекрасно работает!

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

Так что теперь дизайн больше не реагирует ..

Есть ли обходной путь, о котором я не думаю?

1 Ответ

0 голосов
/ 17 апреля 2020

Измените ваши правила @media, чтобы они не были вложенными - это, к сожалению, означает потенциальное дублирование некоторых правил (но таких инструментов, как Sass (или T4, если вы тесно связаны с Visual Studio) предназначены для этого).

Из этого: 

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        /* IE specific CSS within a max-width of 1200px*/
        .ieRule1 {
            color: blue;
        }
    }
}

Для этого: 

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }
}

@media all and (max-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    .ieRule1 {
        color: blue;
    }
}
...