Outlook中的HTML电子邮件按钮对齐 [英] HTML email button alignment in Outlook
本文介绍了Outlook中的HTML电子邮件按钮对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在为客户构建的HTML电子邮件中调整号召性用语按钮时遇到一些问题.按钮显示在左侧，但未正确填充.
I'm having some issues aligning the call to action buttons in a HTML email I am building for a client. The buttons are appearing off to the left and not filled correctly.
这是它们在我的浏览器和大多数电子邮件客户端中的显示方式:
This is how they appear in my browser and most email clients:
这就是它们在Outlook 2016中的显示方式:
And this is how they appear in Outlook 2016:
这是我的墨黑标记:
<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.这是生成的结果:
I am using Foundation for Email to compile the mark up into email friendly HTML. This is how it is the generated output:
<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.
padding support is buggy with Outlook 2007-2016. It does not work at all with Notes.
line-height 在Outlook中也存在问题.
line-height is also buggy with Outlook.
我可能会尝试将< td height ="30"> 设置为href的父级，以便获得按钮"Like on Facebook"的高度.
I might try setting the <td height="30"> to the parent of your href so that you get your height for the button, "Like on Facebook".
此外， font-family:' Circular Book' 不适用于Outlook.Web字体支持也存在问题.某些字体可以工作，但是具有两个名称的非网络安全字体会导致Outlook恢复为网络安全字体Times New Roman.
In addition, font-family:'Circular Book' is not going to work with Outlook. Web font support is buggy as well. Some fonts work, but fonts with two names that are not web safe causes Outlook to revert to it's web-safe font, Times New Roman.
祝你好运.
这篇关于Outlook中的HTML电子邮件按钮对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
