Question

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

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

你会建议在整个街区使用背景图片吗？或者是否有一种优雅的方式，看起来像这样，并在客户端工作。

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

enter image description here

Answer 1

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

然后你可以根据需要在每个分区中设置多个分区，记住重置每个表，行和单元格的边框。

每个单元格获取自己的图像或图像切片。对于最后一行，您可以在锚标记中只有一个图像。还要记住将所有样式保留在内联元素上。

html电子邮件Boilerplate几乎是防弹的。

http://htmlemailboilerplate.com/

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

</table>

Answer 2

在这里 - 只需要一个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>

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

Answer 3

背景图片也不是很兼容：

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

我只想将最后一行切成3个单独的图像（左，右，右）。

如果您希望整个行拥有一个图像，您还可以使用图像映射来使按钮部分成为链接。

带边框的样式按钮＆amp;使用电子邮件HTML抵消

3 个答案: