gpt4 book ai didi

html 电子邮件模板不在 Outlook 中呈现属性

转载 作者:行者123 更新时间:2023-12-02 00:15:17 26 4
gpt4 key购买 nike

因为我正在处理 HTML 电子邮件模板,在所有浏览器中看起来都很棒,但在 Outlook 中呈现有问题。它无法正确呈现,尤其是 buttonborder-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>

View in Outlook

最佳答案

按钮处理起来很繁琐。下面是两个链接代码,它们模拟一个按钮并以相同的方式在所有电子邮件客户端 中工作。您将必须删除 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 中呈现属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57153778/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com