如果 IE10 或 IE11 显示不同的图像

Question

我需要这样的东西：

<img src="image.svg" />

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

由于条件 cmets 在 IE10 和 IE11 中不再工作，我无法完成此操作。 可用于针对新 Internet Explorer 的 Javascript 似乎复杂且不可靠。但也许我错了，有一些简单的解决方案。

感谢您的帮助

Answer 1

我认为没有任何脚本很难做到。 @eisbehr 给出的答案会很好用。但是如果你不想使用除 jQuery 之外的任何其他插件，你可以检查 documentMode 并在 body 中添加一些信息。然后让 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

没有内置或默认解决方案。您必须创建自己的或使用其他工具。在浏览器端，您可以使用Modernizr、browser 或jQuery.browser 等工具，然后使用JS 进行检查。

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

Modernizer 更加复杂，有很多可能性。这可以帮助您：

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找到有关此示例的模式详细信息。