html电子邮件圆形按钮与图像

Question

我无法制作带图像的圆形按钮..按钮在浏览器中显示正常但在电子邮件客户端（包括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..!

Answer 1

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

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

以下是具有这些改动的jsfiddle - http://jsfiddle.net/X5QTR/