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).
Leave a Reply