0

我在制作带有图像的圆形按钮时遇到问题..该按钮在浏览器中显示正常，但在电子邮件客户端（包括 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>

这是它的样子..注意它下面的一行..！

4

1 回答 1

3

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

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

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

于 2012-12-03T16:07:53.360 回答