带有图像的 html 电子邮件圆形按钮答案

【问题标题】：html email rounded button with images带有图像的 html 电子邮件圆形按钮
【发布时间】：2012-12-04 00:07:53
【问题描述】：

我在制作带有图像的圆形按钮时遇到问题。该按钮在浏览器中显示正常，但在电子邮件客户端（包括 yahoo 和 gmail）中，按钮会中断。这是我正在使用的 HTML 表格代码：

<table width="144" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A">
  <tr>
    <td width="12"><img src="http://thehotdeal.net/clients/1/padma/1.gif" width="12" height="12" border="0" alt="...">
    </td>
    <td width="130"></td>
    <td width="12">
      <img src="http://thehotdeal.net/clients/1/padma/2.gif" width="12" height="12" border="0" alt="...">
    </td>
 </tr>
 <tr>
   <td cellpadding="0" cellspacing="0" border="0"></td>
   <td align="center">
     <p style="padding: 0"> <span mc:edit="date" style="color: #ffffff;">2012 - $25</span></p>
   </td>
   <td cellpadding="0" cellspacing="0" border="0"></td>
 </tr>
 <tr>
 <td>
   <img src="http://thehotdeal.net/clients/1/padma/3.gif" width="12" height="12" border="0" alt="...">
 </td>
 <td cellpadding="0" cellspacing="0" border="0"></td>
 <td>
   <img src="http://thehotdeal.net/clients/1/padma/4.gif" width="12" height="12" border="0" alt="...">
 </td>
</tr>
</table>

Here is how this looks.. notice a line below it..!

【问题讨论】：

标签： html html-email html-table

【解决方案1】：

可以更改一些元素以使此渲染更好地跨客户端：

display:block; 在你的图片上
使用bgcolor="#9C084A"分别为每个td添加背景颜色
显式设置每个td的宽度和高度
如果需要，请在图片上使用 valign

这是带有这些改动的 jsfiddle - http://jsfiddle.net/X5QTR/

【讨论】：

谢谢。这正是我所需要的。感谢您提供有用的信息。