Google Chrome отвечает на определенные медиа запросы IE9 - PullRequest
Новая
       33

Google Chrome отвечает на определенные медиа запросы IE9

0 голосов
/ 06 декабря 2018

Я пытаюсь применить определенные стили только к браузеру IE9, чтобы он работал.Я сослался на несколько статей ( Джефф Клэйтон , Ряд ) и этот ответ , они предложили мне пойти с этим: 

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 .ie9only { /* some  styles */ }
}

Похоже, что это нормально работает в браузерах IE, но стили также поддерживаются браузером Chrome.Не уверен, что это ошибка или предполагаемый путь.Может кто-нибудь помочь мне выбрать IE9 наедине с медиа-запросом, заранее спасибо.

1 Ответ

0 голосов
/ 06 декабря 2018

Как объясняется в связанном вопросе, медиа-запросы - это медиа-запросы , а не запросы браузера, и поэтому вам просто не следует даже пытаться это .Потому что вы ищете сложные хаки .Их сложно протестировать, и они затруднят сопровождение вашего проекта.

Кроме того, что мне очень жаль, что вы все еще поддерживаете IE9, я бы порекомендовал одно из следующих решений:

1) Используйте условные обозначения 

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

Возможно, это лучший способ.Microsoft знает, что IE - это плохо, и поэтому они представили их.Важный бонус: всем другим браузерам не нужно загружать хреновый IE9 CSS.

2) Использовать класс на HTML-теле (с JavaScript) 

var browser = {
        isIe: function () {
            return navigator.appVersion.indexOf("MSIE") != -1;
        },
        navigator: navigator.appVersion,
        getVersion: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1)
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    };

if (browser.isIe() && browser.getVersion() == 9) {
     document.body.className += ' ' + 'ie9';
}

В своем CSS вы просто делаете: 

.ie9 #my-elem-to-style {

}

Простые правила специфичности CSS решат вашу проблему.

3) Используйте библиотеку, если она применима (например, Modernizr)

...