если IE10 или IE11 отображать различные изображения

Question

мне нужно что-то вроде этого:

<img src="image.svg" /> 

<!--[if IE ]><img src="image.png" /><![endif]--> 

Поскольку условные комментарии не работают больше в IE10 и IE11 У меня возникли сложности с выполнением этого. Javascript, который доступен для таргетинга на новый интернет-исследователь, кажется сложным и ненадежным. Но, возможно, я ошибаюсь, и есть какое-то простое решение.

Спасибо за вашу помощь

Answer 1

Я думаю, что это будет трудно обойтись без каких-либо скриптов. И ответ, данный @eisbehr, будет отлично работать. Но если вы не хотите использовать какие-либо другие плагины, но jQuery, вы можете проверить documentMode и добавить некоторую информацию в тело. Тогда пусть css решит, что показывать или нет.

ПРИМЕЧАНИЕ: оно не работает в Edge. Код написан специально для IE10 и IE11, поскольку это то, о чем попросил OP. Но его можно настроить для разных версий. Но тогда я бы пошел с ответом от @eisbehr.

$(function() { 
 
    if(document["documentMode"]) { // If Internet Explorer 10, 11 
 
     var cssClass = "ie" + document["documentMode"]; 
 
     $('body').addClass(cssClass); 
 
    } 
 
});

.ie-dependant { 
 
    display:none; 
 
} 
 

 
body.ie11 .ie-dependant.ie11 { 
 
    display: block; 
 
} 
 

 
body.ie10 .ie-dependant.ie10 { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ie-dependant ie10"> 
 
    This is ie 10. 
 
</div> 
 

 
<div class="ie-dependant ie11"> 
 
    This is ie 11. 
 
</div>

В качестве альтернативы, вы можете обнаружить это на стороне сервера, и позволить серверу возвращать различные таблицы стилей.

Answer 2

Ther не сборки в или решения по умолчанию для этого. Вы должны создавать собственные или использовать другие инструменты. На стороне браузера вы можете использовать такие инструменты, как Modernizr, browser или jQuery.browser и выполнить проверку с помощью JS.

if(browser.msie && browser.version >= 10) { 
    // browser is IE10 or 11 
} 

Модернизатор еще сложнее и имеет много возможностей. Это может помочь вам:

if(!Modernizr.svg) { 
    var imgs = document.getElementsByTagName('img'); 
    var svgExtension = /.*\.svg$/ 
    var l = imgs.length; 

    for(var i = 0; i < l; i++) { 
     if(imgs[i].src.match(svgExtension)) { 
      imgs[i].src = imgs[i].src.slice(0, -3) + 'png'; 
     } 
    } 
} 

режим подробности об этом примере можно найти here.