Radio Input Bug Causes Media Queries to Activate in Internet Explorer

When creating interactive email be careful if your design contains checked radio elements as it can cause some quirks when viewed in some Webmail clients like Yahoo! Mail and AOL Mail on Internet Explorer.

<style>
/* this mq gets activated in Yahoo! Mail in IE */
@media screen and (max-width:400px){
   .wrapper{ width:100%; }
   ...
}
</style>

<div class="wrapper">
<input type=radio checked>
...
</div>

This article goes over how max-width media queries that reference elements that wrap checked radio elements gets activated in some webmail clients (but not others) in Internet Explorer and a few ways to work around the problem (such as using max-device-width).

Read the article.



Subscribe to the #EmailGeeks Newsletter

Leave a Reply

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