使用电子邮件 HTML 设置带边框和偏移的样式按钮答案

【问题标题】：Styling button with border & offset using email HTML使用电子邮件 HTML 设置带边框和偏移的样式按钮
【发布时间】：2014-03-29 18:18:21
【问题描述】：

我有一个电子邮件模板的设计，我正在修改处理 HTML/CSS 中以下元素样式的最佳方法。注意几点：

由于是 HTML 邮件，所以主要使用表格。
使用负边距可能与不同的邮件客户端不兼容。
注意按钮周围的白色边框

您是否建议为整个区块使用背景图片？或者有没有一种优雅的方式看起来像这样并且可以跨客户端工作。

这是我的设置：http://jsfiddle.net/ZHkdV/

【问题讨论】：

您需要包含一个链接或一些代码。
刚刚做了。 jsfiddle.net/ZHkdV

标签： html css html-email

【解决方案1】：

给你 - 顶角只需要 30x30 的图像：

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
  <tr>
    <td width="30" height="30">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
    </td>
    <td width="240" height="30">&nbsp;
    </td>
    <td width="30" height="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30" height="160">&nbsp;
    </td>
    <td width="240" height="160" valign="top">
      <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
      &nbsp;<br>
      some text here
      </font>
    </td>
    <td width="30" height="160">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
            <a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
            <td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
            <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
            BUTTON
            </font>
          </td>
          </a>

          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
        </tr>
        <tr>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这应该适用于所有客户端...

【讨论】：

您能解释一下“Outlook 可以在转发时在此 td 底部添加空格”吗？谢谢。
@Alysko Outlook 在转发电子邮件时会在表格周围嵌入<p class=”MsoNormal”>。如果订阅者将电子邮件从 Outlook 转发到 Gmail（或任何您无法使用样式标签将类别归零的客户端），则会在表格和图像(related link) 下方创建约 20 像素的不需要的底部边距。通过设置这个白色，我隐藏了一条丑陋的浅灰色线，不会出现在这种情况下的按钮下方。

【解决方案2】：

对于电子邮件模板，您不必担心验证，因此您可以使用漂亮的 'hacky' html。客户端兼容性的一种方法是让每一行本身都是一个表，设置在一个主“包装”表中。

然后您可以在每个分区中设置任意多个分区，记住要重置每个表格、行和单元格的边框。

每个单元格都有自己的图像或图像切片。对于最后一行，您可以简单地在锚标记中包含一个图像。还要记住保持元素的所有样式内联。

html 电子邮件样板文件几乎是防弹的。

http://htmlemailboilerplate.com/

<table> <!- Wrapper ->
    <tr>
    <td>
    <table>
    <tr>
    <td>
    </td>
    </tr>
    </table>
    </td>
    </tr>

</table>

【讨论】：

【解决方案3】：

背景图片也不是很兼容：

http://www.campaignmonitor.com/css/

我会将最后一行分成 3 个单独的图像（左、按钮、右）。

如果您希望整行使用一张图片，您也可以使用图片映射将按钮部分设为链接。

【讨论】：