Question

由于我正在处理HTML电子邮件模板，因此在所有浏览器中看起来都很不错，但是在Outlook中呈现问题。特别是button和border-bottom元素，它不能正确呈现。附加了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

电子邮件模板非常特殊，因为电子邮件客户端与常规浏览器不同。当我想做电子邮件模板时，我使用Zurb Foundation。但是，您的问题很可能是因为您没有在所有地方都使用内联css。

以下是在每种情况下（桌面，浏览器，Web）的CSS电子邮件支持的资源。

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

到目前为止，Zurb涵盖11种不同的模板。

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

Zurb电子邮件文档

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

电子邮件html模板的主要已知问题之一是它如何管理CSS。这就是为什么CSS内联工具对此有用的原因。基本上，没有CSS类，所有内容都必须是内联的。

https://htmlemail.io/inline/

Zurb已获得MIT许可 https://foundation.zurb.com/get-involved/faq.html

Answer 2

Word不支持lambda元素。如您所知，Outlook使用Word呈现邮件正文。因此，您可以在以下文章中找到所有受支持和不受支持的HTML元素，属性和级联样式表属性：

Answer 3

按钮很容易处理。以下是为您提供的两个代码，用于模拟一个按钮并以相同的方式在所有电子邮件客户端中工作的链接。您将必须删除td上的填充，并可以更改按钮的填充以控制高度和宽度。

实体按钮：

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

边框按钮：

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

我注意到您使用Open Sans作为按钮的字体。 Outlook将不会阅读此内容并呈现Times New Roman。希望您已经为此回拨了代码。

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

3 个答案: