html - 使用电子邮件 HTML 设计带有边框和偏移量的按钮

Question

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

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

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

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

Answer 1

给你 - 顶 Angular 只需要一张 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>

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