我已经在Mandrill中创建了一封邮件,并且正在尝试创建一个按钮。
所有电子邮件客户端显示正确的按钮,但是,如果您在Macbook air(小屏幕)上的Outlook 365 for Mac中查看该按钮,则该按钮会损坏。在Macbook Pro(更大的屏幕)上查看电子邮件不会使其中断。
macbook air的屏幕截图:
Screenshot
我已经尝试过将按钮的高度,最小宽度和宽度设置为填充,而现在使用单独的td作为间距。
<tr>
<td class="min-width" style="min-width: 640px;">
<!-- LOGO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #040229;">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="height:50px;"> </td>
</tr>
<tr>
<td align="center">
<img alt="USA TOURS" src="https://usatours.dk/themes/custom/usatours/scss/assets/img/usatours_logo.png" height="70" style="width:305px; display: block; border: 0; height: 70px; color: #ffffff; font-family: arial,sans-serif; font-weight:bold; font-size:20px; line-height:36px; padding-right:20px"/>
</td>
</tr>
<tr>
<td style="height:50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LOGO -->
{{#if greeting }}
<!-- GREETING -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td colspan="3" style="height:50px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica',Arial,sans-serif; font-size:20px; font-family: 'Formular','Roboto','Helvetica',sans-serif; color:#040229; ">
{{ greeting }}
</td>
<td style="width:20px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:20px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" style="width:100px;">
<tr>
<td align="center" style="height: 6px; background-color:#F51912; font-size:1px; mso-line-height-rule:exactly; line-height:1px;">
</td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:20px;"> </td>
</tr>
</table>
<!-- GREETING -->
{{/if}}
<!-- INTRO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica',sans-serif; font-size:12px; font-family: 'Formular',sans-serif; color:#040229;">
{{#each introLines }}
{{{ this }}}
{{/each}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- INTRO -->
{{#if actionUrl}}
<!-- actION -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="display:inline-block;">
<table cellspacing="0" cellpadding="0" border="0" style=" background-color: #F51912;">
<tr>
<td colspan="3" style="height:10px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="center" style="background-color:#F51912; min-width:150px;">
<a href="{{actionUrl}}" style="mso-ascii-font-family: 'Helvetica',sans-serif; color:#ffffff; font-family: 'Formular-bold',sans-serif; text-transform:uppercase; font-size:13px; line-height: 30px; text-decoration:none;">{{actionText}}</a>
</td>
<td style="width:20px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:10px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- actION -->
{{/if}}
{{#if outroLines}}
{{#each outroLines}}
<!-- OUTRO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica',sans-serif; color:#040229;">
{{{ this }}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- OUTRO -->
{{/each}}
{{/if}}
{{#if salutation}}
<!-- SALUTATION -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica',sans-serif; color:#808080;">
{{{salutation}}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:15px;"> </td>
</tr>
</table>
<!-- SALUTATION -->
{{/if}}
<!-- END LOGO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" style="background-color: #040229;">
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="center">
<img alt="USA TOURS" src="https://usatours.dk/themes/custom/usatours/scss/assets/img/usatours_logo.png" height="50" style="color: #ffffff; font-family: arial,sans-serif; font-weight:bold; font-size:20px; line-height:36px; width:218px; display: block; border: 0; height: 50px;"/>
</td>
<td style="width:35px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
</table>
<!-- END LOGO -->
</td>
</tr>
</table> ```