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

#css #internet_explorer #style

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

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

Ответы

Ответ 1

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

javascript

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


css

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


оригинал


Ответ 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 по ширине*/
}


Ответ 3

Чистый CSS: условные стили для браузера (хаки)

Под .selector подразумевается нужный вам селектор.

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Нужные стили */ }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Нужные стили */ }

/* Internet Explorer 9+ */
_::selection, .selector { /* Нужные стили */ }

/* Также можно так для IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Нужные стили */
}


Отдельные файлы для каждого браузера и их подключение через JavaScript

Создаёте отдельный файл, к примеру, 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);
}


Ответ 4

/* стили только для IE9 */ 
@media screen and (min-width:0\0) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}

/* стили только для IE10 и IE11 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}