html 电子邮件模板未在 Outlook 中呈现 属性
html email template does not rendering property in Outlook
因为我正在处理 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>
电子邮件模板很特别，因为电子邮件客户端不像常规浏览器。当我想做电子邮件模板时，我使用 Zurb foundation。但是，您的问题很可能是因为您没有在所有地方使用 css 内联。
这里是 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 内联工具对它有用的原因。基本上没有cssclass，一切都必须内联
Zurb 已获得麻省理工学院许可
https://foundation.zurb.com/get-involved/faq.html
Word 不支持 button 元素。您可能知道 Outlook 使用 Word 来呈现邮件正文。因此，您可以在以下文章中找到所有受支持和不受支持的 HTML 元素、属性和级联样式表属性：
按钮处理起来很麻烦。下面是供您使用的两个代码，用于模拟 一个按钮并以相同方式跨所有电子邮件客户端 工作。您将必须删除 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.whosebug.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 中呈现有问题。它无法正确呈现，尤其是 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>
电子邮件模板很特别，因为电子邮件客户端不像常规浏览器。当我想做电子邮件模板时，我使用 Zurb foundation。但是，您的问题很可能是因为您没有在所有地方使用 css 内联。
这里是 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 内联工具对它有用的原因。基本上没有cssclass，一切都必须内联
Zurb 已获得麻省理工学院许可 https://foundation.zurb.com/get-involved/faq.html
Word 不支持 button 元素。您可能知道 Outlook 使用 Word 来呈现邮件正文。因此，您可以在以下文章中找到所有受支持和不受支持的 HTML 元素、属性和级联样式表属性：
按钮处理起来很麻烦。下面是供您使用的两个代码，用于模拟 一个按钮并以相同方式跨所有电子邮件客户端 工作。您将必须删除 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.whosebug.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。希望你已经为它编写了回电。