Question

大家好，我正在尝试发送带有HTML的电子邮件，当然我知道Outlook中不支持格式化和很多CSS，但我想知道为什么这个简单的东西显示破碎，有没有快速修复或解决方法/替代方案？看看按钮应该如何显示：

但它们看起来像这样：

以下是代码：

<tr>
    <td style="display:block;min-height:38px;max-height:38px;">
        <p style="margin-left:15px;">
            <a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;" 
href="link here..">Enquire</a>
            <a href="link here.." style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;float:left;">Full Details</a>
        </p>
    </div>
    </tr>
</td>

Answer 1

作为电子邮件营销商，我建议您使用图片作为按钮。特别是如果它是一个行动号召。你不想被打破的一件事是，你可以信任它的唯一方法就是在表格单元格中使用图像。

我希望有所帮助！

Answer 2

这个帖子中有一些错误的信息。

您可以使用图像作为按钮，但更高级的设计师正趋向于＆＃34;防弹＆＃34;按钮这些天。它们显示图像关闭。请看这个链接：buttons.cm

Outlook支持背景图片，但仅限于<body>标记或使用VML，请参阅上面的buttons.cm链接或backgrounds.cm作为示例。

回到你的具体例子，有几种方法可以实现它，但这是我将如何做到的：

<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
  <tr>
    <td style="padding-top:20px; padding-bottom:10px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50">&nbsp;
          </td>
          <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
            <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Enquire</a>
          </td>
          <td width="20">&nbsp;
          </td>
          <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
            <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Full Details</a>
          </td>
          <td width="50">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

另外，您需要在html电子邮件中使用6位十六进制颜色，并且不要浪费时间使用以下css属性，因为它们具有不一致的支持：

margin（使用padding代替）
text-align（使用align=""代替）
min-height＆amp; max-height
float（使用align =＆＃34;＆＃34;代替）
background-color（使用bgcolor=""代替）

另外，请避免像padding:5px 5px 0px 5px;这样的速记。很遗憾，您需要将其写出padding:5px; padding-bottom:0;

Answer 3

您是否尝试过赋予<td>背景色？（或另一个容器）

Answer 4

您也可以尝试

<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>

我没有在Outlook中测试过，但它可能会有效。

Answer 5

使用图像并不是最佳解决方案，特别是因为大多数时间电子邮件都是在没有图像的情况下呈现，直到用户接受查看图像为止。

我这样做的方法是在表格中放置一个表格，如下所示：

Debug.Print

HTML电子邮件格式搞砸了

5 个答案: