All

• 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 http://blog.jmwhite.co.uk/2014/08/19/email-campaigns-windows-phone-part-2-pop3-and-imap/

  -courtesy of zerocents and James White

• Kill Gmail App Zooming:

  Stop Gmail app from zooming text

  style="min-width:600px;"
  

  -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 Outlook.com

  Outlook.com 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

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

  -courtesy of Mike Ragan http://labs.actionrocket.co/makemobileemailworkin_outlook

• 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:

  Gmail:

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

  Outlook Web:

  .class:hover
  

  Yahoo! Web:

  .class:hover
  

  -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" />
  </td>
  

• 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" />  
  </div>
  

  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: http://www.emailonacid.com/blog/details/C13/twofixesforimagespacinginoutlookwebapp_owa

  -courtesy of James White at http://blog.jmwhite.co.uk

• 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="mailto:some_email@email.com?subject=A Subject&body=A Body">email@email.com</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 http://kb.mailchimp.com/campaigns/ways-to-build/using-css-in-campaigns

• 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

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

  -courtesy of Michelle Klann