• Windows Phone 8 CSS3 support (IE Mobile)

    Windows Phone 8 renders with IE7 standards by default with POP3/IMAP accounts

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

    Note: Exchange ActiveSync based accounts do not benefit from forcing the document mode because the rendering engine is not IE Mobile.

    For more information see

    -courtesy of zerocents and James White

  • Kill Gmail App Zooming:

    Stop Gmail app from zooming text


    -courtesy of Chris Wise

  • Target Webkit Clients:

    Webkit's support is best support

    @media screen and (-webkit-min-device-pixel-ratio:0) { }

    -courtesy of Kevin Mandeville

  • Remove autolink styling in iOS:

    Fix automatic styling of phone numbers, etc.

    Use a span:

    .appleLinksBlack a { text-decoration:none !important; }
    .appleLinksBlack a { color:#000000 !important; }
    <span class="appleLinksBlack">866-787-7030</span>

    Add additional classes such as .appleLinksWhite a, .appleLinksPink a when appropriate

    -courtesy of Justine Jordan

  • Outlook “View in Browser”:

    Forces Outlook to provide a “view in browser link”

    #outlook a { padding: 0; }
  • Fix mailto in stops mailto from opening a new message

    Add "target=_blank"

    <a href="#" target="_blank">Link</a>

    -courtesy of Matthijs

  • Ghost column to emulate "align" in Outlook

    Outlook hates "align"; we love conditionals

        Table X
        <!--[if mso]></td><td><![endif]-->
        Table Y

    -courtesy of Mike Ragan

  • Margins and Float in Outlook:

    Use a capital “M” or “F”

    style="Margin: 20px; Float: left"

    -courtesy of Nicole Merlin

  • Interactive Email con’t - Hover!:

    Hover effect works on these clients:


    * [lang~="x-selector"]:hover { }

    Outlook Web:


    Yahoo! Web:


    -courtesy of Justin at FreshInbox

  • Interactive Email in Gmail:

    No Class or ID selector support

    Use lang as selector with "x-" prefix

    * [lang~="x-selector"] { }
    <div lang="x-selector"></div>

    -courtesy of Justin at FreshInbox

  • Images in Outlook 2013:

    Fix broken images in Outlook 2013

    <td style="line-height: 13px;">
        <img src="img.jpg" />
  • Image gaps in Office 365 (OWA)

    Office 365 strips display:block causing images to have massive gaps

    Wrapping an image in a <div> with a height equal to the image height will simulate a block element for clients that won't accept display:block.

    <div style="height:125px;">  
        <img src="/path/to/image.jpg" alt="Image Description" style="display:block;" width="200" height="125" />  

    In some cases the addition of font-size:0; may be required in order to remove further gaps created by certain CSS properties set on the parent element i.e. table cell such as line-height.

    Warning: Small font sizes can effect your spam score.

    For more information visit:

    -courtesy of James White at

  • Hide content in Office 365/OWA (incl Webmail):

    Office 365 strips display, mso-hide, mso conditional

    Set font-size in containing cell to “0px”

    <td style="font-size: 0px; display: none;"></td>
  • Fix mailto in gmail

    gmail strips subject and body from mailto links

    Use lowercase for subject anbd body attribute

    <a href=" Subject&body=A Body"></a>

    -courtesy of SV

  • Stop some clients from stripping class:

    Some clients strip any lines starting with “.”

    Use a space before any class styling

     .selector { }

    -courtesy of Campaign Monitor

  • Click To Tap:

    Change button text responsively

    @media screen and (max-width:600px) {<br>
    span[class=click] {display: none !important; max-height: 0 !important;}<br>
    span[class=tap]:after {content:Tap;}<br><br>
    <a href=”#”><span class=”tap”><span class=”click”>Click</span></span>here</a>

    -courtesy of Nicole Merlin

  • Good formatting for bulleted list:

    Stops bullet from sitting between two lines

            <td valign="top">&bull;</td>
            <td>Prolongs oil life</td>

    -courtesy of Michelle Klann