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 に答える