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

我有一个电子邮件模板的设计，并且我正在修补有关处理HTML/CSS中以下元素样式的最佳方法。请注意以下几点：带边框和使用电子邮件偏移的样式按钮HTML

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

你会推荐使用的背景图像这整个块白边？还是有一种优雅的方式，看起来像这样，可以在客户中使用。

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

enter image description here

来源

2013-06-19 dandoen

您需要包括一个链接或一些代码。 – dmc

刚做过。 http://jsfiddle.net/ZHkdV/ – dandoen

在这里你去 - 只需要右上角一个30×30的图像：

<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>

这应会在所有客户端...

来源

2013-06-19 17:34:24 John

你能解释一下“Outlook可以在转发时在这个td的底部添加空格吗”吗？谢谢。 – Alysko

@Alysko Outlook在转发电子邮件时在表格周围嵌入了

'。如果用户将电子邮件从Outlook转发到Gmail（或者任何不能使用样式标签将客户端设置为零的客户端），它会在表格和图片下方创建一个不需要的底部边距约20px [（相关链接） ]（http://commadot.com/gmail-and-p-msonormal/）。通过设置这个白色，我隐藏了一个丑陋的浅灰色线条出现在这个场景下的按钮下。 – John

背景图片不是很兼容两种：

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

我只想片的最后一排为3个独立的图像（左，按钮，右）。

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

来源

2013-06-19 14:00:13 LouD

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

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

每个单元格获取它自己的图像或图像的切片。对于最后一行，您可以在锚标记中简单地显示一个图像。另外请记住保持内联元素的所有样式。

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

http://htmlemailboilerplate.com/

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

</table>

来源

2013-06-19 14:28:41 dmc

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

回答

相关问题