IE Edge Meta Data

Prevent IE Edge Meta Tag from Breaking Images in Live Mail


The IE=Edge meta tag is becoming very popular with HTML email developers for one reason: it enables CSS3 and media queries in Windows Phone 7.5 and higher. This is a huge win for developers. It turns out that this tag will also enable “edge” mode in Live Mail and the Windows 8 Mail app, giving developers access to rounded borders and media queries. Here is what this meta tag looks like:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

The Problem

It turns out that the IE=Edge meta tag will break the display of images in Live Mail. I’m not sure what causes this issue, as “edge” mode shouldn’t break images for any reason, and wouldn’t break them if the code were loaded in Internet Explorer. This tag also causes the email to be unprintable in Outlook 2003. Luckily for us, the fix is simple. In fact, the printing fix that James White covered in his blog (thanks James!) will also fix the image display issues.

The Fix

All you’ll need to do is include a conditional statement in your code before the IE=edge meta tag. The presence of any conditional statement resolves the image issues, as well as the printing issue. In fact, the !mso conditional doesn’t affect Outlook 2003. The !mso tag is only effective for Outlook 2007, 2010, 2013 and Outlook.com, but it still works. I tried this with a few conditional comments, and all of them fixed the image issue in Live Mail. It doesn’t even matter if the tag is inside of the conditional statement or not.

<!--[if !mso]><!-- -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

More Fun with Meta Tags

What meta tags do you find useful in your email coding? Let us know in the comments below!

5 thoughts on “Prevent IE Edge Meta Tag from Breaking Images in Live Mail”

  1. Thanks for writing this up Geoff. I was happy when we sort of solved the mystery of the missing images in Live Mail. Though it would still be nice to know why it does this. We may never know.

  2. Great post Geoff. Always good to preempt these great solutions when designing my email content to clients!

    Thanks for the tip!

  3. Kirsty,
    I left it in there because I took that snippet from James White (linked above). As far as I know, though, you don’t need to have it. Any conditional comment around or before the meta tag should fix the problem.

  4. Thanks for featuring my article regarding the X-UA-Compatible header! I didn’t actually know it broke Windows Live Mail as well. Good catch.

    The reason why there is the extra comment mark is for Outlook.com and its conditional comments stripping, though it may not be applicable any longer.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies