Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не отображается как положено (или вообще не отображается).
В общем, все известные мне способы из интернета, как задетектить IE, не сработали или сработали не так как ожидалось, пробовал и эти варианты, и многие другие:
@media screen and (min-width:0\0) { }
@media all and (-ms-high-contrast: none) { }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { }
@supports (-webkit-appearance: none) { }
Поэтому пришлось прибегнуть к старому доброму определению браузера IE с помощью JS:
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
Если isIE
равно true
, значит можем навесить на любой элемент класс .ie-support
, в моем примере, для меня лучше навесить данный класс на body
, потому как потом можно обратиться к любому элементу внутри body
:
if (isIE) {
$('body').addClass('ie-support');
}
И уже в стилях можем задать любые нужные правила для элементов, если страница открыта в браузере IE:
.ie-support svg path {
filter: none;
}
Данные правила сработают только в браузере IE11 или Edge.
Комментарии (2) к “Как задать отдельные стили только для браузера IE 11 и Edge”
Alex
modernizr.com/download?svgfilters-setclasses
А можно просто подключить modernizr с проверкой этой фичи
Denis Creative
Можно, но это дополнительная библиотека всего для одного момента.
Это просто пример, как быстро задетектить IE.