HTML电子邮件模板无法在Outlook中呈现属性

Question

As I am working on HTML email template and looks great in all browser but issue with rendering in Outlook. it does not rendering properly especially button and border-bottom element. Attached a screenshot of Outlook.

 <table cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;"> <tbody> <tr style="border-collapse: collapse;"> <td width="520" align="left" style="padding: 0;margin: 0;"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;"> <tbody> <tr style="border-collapse: collapse;"> <td align="center" style="padding: 0;margin: 0;padding-bottom: 15px;"> <table width="520" height="101" cellspacing="1" cellpadding="1" border="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;"> <tbody> <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;"> <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Booking Reference:</strong></td> <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">1087882</td> </tr> <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;"> <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Accommodation:</strong></td> <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;"><a href="" target="_blank" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none;mso-line-height-rule: exactly;font-family: 'Open Sans', sans-serif;font-size: 18px;text-decoration: underline;font-style: normal;color: #233745;line-height: 38px;">Lodge Suites</a> (August 18 - 2 Nights)</td> </tr> <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;height: 1px;width: 100%;margin: 0px;"> <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong></strong></td> <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">Guided Fishing Trip (August 19)</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <tr style="border-collapse: collapse;"> <td style="padding: 0;margin: 0;padding-top: 15px;padding-bottom: 15px;padding-left: 40px;padding-right: 40px;"> <span style="display: block;height: 48px;width: 270px;border-radius: 10px;background-color: #16A5B4;box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);text-align: center;"> <a href="https://viewstripo.email/" target="_blank" style="-webkit-text-size-adjust: none;font-family: 'Open Sans', sans-serif;font-size: 16px;text-decoration: none !important; font-style: normal;color: #fff;font-weight: 700;letter-spacing: 1px;line-height: 47px;text-align: center;display: block;text-transform: uppercase;">Pay Remaining Balance</a></span></td> </tr> 

Answer 1

Email template is special as email client are not like a regular browser. When I want to do email template I use Zurb foundation. However, your problem is most likely because you don't use css inline everywhere.

Here is a resource for css email support in every scenarios (desktop, browser, web).

https://templates.mailchimp.com/resources/email-client-css-support/

Zurb cover 11 different template as of now.

https://foundation.zurb.com/emails/email-templates.html

Zurb email docs

https://foundation.zurb.com/emails/docs/

One of the major known problem with email html template is how it manage CSS. That is why an css inline tool is useful for it. Basically, no css class, everything must be inline.

https://htmlemail.io/inline/

Zurb is licenced under MIT https://foundation.zurb.com/get-involved/faq.html

Answer 2

The button element is not supported in Word. As you probably know Outlook uses Word for rendering message bodies. So, you can find all supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:

• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Answer 3

Buttons are fiddly to deal with. Below are two codes for you for links that simulate a button and work across all email clients the same way. You will have to remove the padding on your td and can change the padding of the buttons to control the height and width.

Solid button:

  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> <tr> <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="https://www.stackoverflow.com" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td> </tr> </table> 

Bordered button:

  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> <tr> <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffffff; border-radius: 0px; text-align: center;" valign="top" bgcolor="#ffffff" align="center"> <a href="" target="_blank" style="display: inline-block; color: #3498db; background-color: #ffffff; border: solid 2px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td> </tr> </table> 

I noticed you are using Open Sans as the font for your button. Outlook will not read this and render Times New Roman. Hope you have coded a call back for it.