我在为客户端构建的HTML电子邮件中调整操作按钮时遇到了一些问题。按钮显示在左侧,未正确填充。
这就是它们在我的浏览器和大多数电子邮件客户端中的显示
这就是它们在Outlook 2016中的表现:
这是我的Inky标记:
<row class="call-to-actions">
<columns small="6">
<spacer size="50"></spacer>
<button class="facebook float-right" href="#">Like on Facebook</button>
<spacer size="50"></spacer>
</columns>
<columns small="6">
<spacer size="50"></spacer>
<button class="twitter" href="#">Follow on Twitter</button>
<spacer size="50"></spacer>
</columns>
</row>
按钮的我的SASS:
table {
&.button {
table {
td {
background: transparent !important;
}
}
&.facebook {
table {
background-color: #3b5998;
td {
a {
background-color: #3b5998;
border: none;
line-height: 30px;
}
}
}
}
&.twitter {
table {
background-color: #1da1f2;
td {
background-color: #1da1f2;
a {
background-color: #1da1f2;
border: none;
line-height: 30px;
}
}
}
}
}
}
我正在使用Foundation for Email将标记编译成电子邮件友好的HTML。这就是生成输出的方式:
<table class="row call-to-actions" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-6 large-6 columns first"
style="Margin:0 auto;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:16px;padding-right:10px!important;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">
<table class="spacer"
style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
height="50px"></td>
</tr>
</tbody>
</table>
<table class="button facebook float-right"
style="Margin:0;border-collapse:collapse;border-spacing:0;float:right;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table style="background-color:#3b5998;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;border:none;border-collapse:collapse!important;color:#fff;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<a href="#"
style="Margin:0;background-color:#3b5998;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
Like on Facebook</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="spacer"
style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
height="50px"></td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last"
style="Margin:0 auto;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:10px!important;padding-right:16px;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">
<table class="spacer"
style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
</tr>
</tbody>
</table>
<table class="button twitter"
style="Margin:0;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table style="background-color:#1da1f2;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;background-color:#1da1f2;border:none;border-collapse:collapse!important;color:#fff;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<a href="#"
style="Margin:0;background-color:#1da1f2;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
Follow on Twitter</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="spacer"
style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:'Circular Book',Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
我错过了什么?
padding
支持是Outlook 2007-2016的错误。它与Notes完全不兼容。
line-height
也是Outlook的错误。
我可能会尝试将<td height="30">
设置为你的href的父级,这样你就可以获得按钮的高度,“喜欢在Facebook上”。
此外,font-family:'Circular Book'
不适用于Outlook。 Web字体支持也是错误的。某些字体可以工作,但是具有两个非Web安全名称的字体会导致Outlook恢复为Web安全字体Times New Roman。
祝好运。
Outlook等电子邮件客户端不支持您的某些样式。我建议使用像this这样的工具扫描你的代码。你可以找到很多像这样的工具。
这是Outlook中一个非常常见的问题。我推荐Bulletproof Buttons by Campaign Monitor。这是非常好的跨平台,工作超级棒。