按钮在 Outlook 中看起来很糟糕

Question

您好，我正在制作一个在 Outlook 2010 中工作的按钮，问题是按钮图像不会垂直居中，并且不会显示填充和边距。有没有人可以帮我解决这个问题？适用于大多数电子邮件客户端。

<table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left; padding:0; " align="left" >

<td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; display:block; color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; text-align:left; background-color:#EB7201; width:auto !important; " valign="top" align="center" >

<div class="mktEditable" id="cta-btn">

<a href="#pramrylink" style="color: #fff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px;letter-spacing:1px;vertical-align: middle; display: inline-block; margin: 10px;padding: 10px;">
<span style="vertical-align:middle; margin-left:5px;">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

边距和填充确实应该用 td 代替，以保持所有客户端的电子邮件格式一致。但是对于上面的代码，您删除了 text-align: left;在 tr 上应该修复它。

您应该阅读有关允许在电子邮件中使用 CSS 的内容 https://www.campaignmonitor.com/css/

我已经删除了一些东西并在下面添加了它以供您使用。

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left;" align="left" >

<td style="color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px;  " valign="middle" align="center" >

<div class="mktEditable" id="cta-btn">

<a href="#pramrylink" style="width: 180px; 
    color: #fff; 
    text-decoration: none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 14px;
    letter-spacing:1px;
    vertical-align: middle; 
    display: inline-block; 
    padding: 10px;
    background-color:#EB7201; ">
<span style="vertical-align:middle;" align="left">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>

浮点数替换为align: left/right;
边距应替换为更复杂的 tr 和 td 组合，如果某些内容需要像图像一样居中，则 align:center; 包装 td 应该做到这一点。

Answer 2

尝试重置 link 上的所有内容（0 行高、0 填充、0 字体大小）并在内部应用样式（修复行高、修复填充和修复字体大小） link 进入您应用重置样式的范围。

我建议尝试很多不同的 css 实现并重新发送您的邮件。

提示：Campaignmonitor 根据 CSS 和时事通讯提供了一个很好的列表 https://www.campaignmonitor.com/css/

按钮在 Outlook 中看起来很糟糕

Button looks awful in Outlook

html

css

outlook

html-email