Email Development
Prevent IE Edge Meta Tag from Breaking Images in Live Mail
Email Development
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" />
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.
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]-->
What meta tags do you find useful in your email coding? Let us know in the comments below!
