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;圖片上的
• 把你的圖片單獨使用bgcolor="#9C084A"
• 明確設置寬度和高度上的每個td
• 使用valign每個td背景顏色，如果需要的話

這裏是的jsfiddle與這些改建 - http://jsfiddle.net/X5QTR/