if IE10 or IE11 display different image

Question

I need something like this:

<img src="image.svg" />

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

Since conditional comments are not working any more in IE10 and IE11 I'm having trouble accomplishing this. Javascript that is available for targeting new internet explorer seems complicated and unreliable. But maybe I'm wrong and there is some simple solution.

Thank you for your help

Detecting this purely client side will be more trouble than it's worth. — MackieeE, Aug 12 '16 at 08:50
you are better off using styles and load in a different stylesheet for IE. Use a png fallback for unsupported browsers or use something like modenizr that adds classes to the `html` tag — Martin, Aug 12 '16 at 08:54
I don't understand why this question deserves instant down vote. SVG works perfectly except on Internet Explorer. It renders this specific SVG incorrectly and it's logical to try to find a way how to replace it with PNG — Goran, Aug 12 '16 at 08:56
Does the svg give an error in IE if it does not load? if so, you could just do `` — epascarello, Aug 12 '16 at 13:43

eisbehr · Answer 1 · 2016-08-12T08:57:30.647

3

Ther is no build in or default solution for this. You have to create own or use other tools. On browser side you could use tools like Modernizr, browser or jQuery.browser and do a check with JS then.

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

Modernizer is even more complex and has a lot of possibilities. This could help you:

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';
        }
    }
}

Mode details about this example can be found here.

edited Aug 12 '16 at 08:57

answered Aug 12 '16 at 08:56

eisbehr

12,243
7
38
63

1

I was just about to suggest Modernizr as well. :-) Seems like probably the most convenient way – Dylan Meeus Aug 12 '16 at 08:56
Modernizr isn't used for detecting browser per say, but the capabilities the browser has. http://stackoverflow.com/questions/13478303/correct-way-to-use-modernizr-to-detect-ie https://github.com/Modernizr/Modernizr/issues/203 – smoksnes Aug 12 '16 at 09:20
1

Thats why the modernizer example uses `!Modernizr.svg` to check svg compatibility and doesn't do a browser check. ;) @smoksnes – eisbehr Aug 12 '16 at 09:23
@eisbehr, Yes. Very clever. Thx for the edit BTW. Much cleaner. – smoksnes Aug 12 '16 at 09:28

score 3 · Accepted Answer · edited Aug 12 '16 at 09:22

I think it will be hard to do without any scripts. And the answer given by @eisbehr will work great. But if you don't want to use any other plugins but jQuery, you can check documentMode and add some info to body. Then let css decide what to show or not.

NOTE: it doesn't work in Edge. The code is written specifically for IE10 and IE11, since that's what the OP asked for. But it can be adjusted for different versions. But then I would go with the answer from @eisbehr instead.

$(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>

Alternatively, you can detect this on server-side, and let the server return different stylesheets.

if IE10 or IE11 display different image

2 Answers2