Как подключить отдельные стили для IE10+?

696

31 декабря 2016, 15:42

Microsoft-то объявил, что теперь IE всё поддерживает, но по факту — c флексами беда, с бутстрапом — беда (по разному принимают отступы).

Как можно эти проблемы решить теперь, если условные комментарии отменили в версиях IE10+?

Answer 1

вот есть вариант с использоанием яваскрипт

javascript

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

css

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

оригинал

Answer 2

Еще есть такой css хак:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10 IE11 */
}

Если вам необходимо использовать его в сочетании с другими медиа-запросами, например, для организации адаптивной верстки, то можно объединять запросы. Например:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width : 768px){
 /* IE10 IE11 до 768px по ширине*/
}

Answer 3

Создаёте отдельный файл, к примеру, ie.css.

Далее подключаете его в зависимости от браузера.

Определяете является ли клиентский браузер IE. Также можете определять версию и для неё давать специфические стили.
Если, да то создаёте элемент link и указываете ему href на наш файл ie.css.

Пример кода

var isIE = false || !!document.documentMode;
if (isIE) {
    var head  = document.getElementsByTagName("head")[0];
    var link  = document.createElement("link");
    link.rel  = "stylesheet";
    link.href = "ie.css";
    head.appendChild(link);
}