Gmail中的图标间距错误

时间：2012-06-03 21:01:15

标签： html gmail html-email

该问题的解决方案可以合理地工作但截至2013年1月26日已不再适用。

以下是我更新的AddThis代码：

<table width="1" height="480" border="0">
  <tbody>
   <tr>
     <td style="height: 386px; width: 20px;">&nbsp;</td>
   </tr>
   <tr>
     <td style="height: 16px; width: 16px;"><a style="color: #f3f3f3;" title="Share Via Facebook" href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbxnj-1.0&amp;url=http%3A%2F%2Fwww.url.com" target="_blank"><img height="16" style="border-width: 0px; border-style: solid; height:16px;" src="http://cache.addthiscdn.com/icons/v1/thumbs/facebook.gif" alt="Facebook" /></a></td>
   </tr>
   <tr>
     <td style="height: 16px; width: 16px;"><a style="color: #f3f3f3;" title="Share Via Twitter" href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbxnj-1.0&amp;url=http%3A%2F%2Fwww.url.com" target="_blank"><img height="16" style="border-width: 0px; border-style: solid; height:16px;" src="http://cache.addthiscdn.com/icons/v1/thumbs/twitter.gif" alt="Twitter" /></a></td>
   </tr>
   <tr>
     <td style="height: 16px; width: 16px;"><a style="color: #f3f3f3;" title="More Sharing Options" href="http://www.addthis.com/bookmark.php?source=tbxnj-1.0&amp;=300&amp;pubid=ra-4dfb00d56c76d2a5&amp;url=http%3A%2F%2Fwww.url.com " target="_blank"><img height="16" style="border-width: 0px; border-style: solid; height:16px;" alt="More..." src="http://cache.addthiscdn.com/icons/v1/thumbs/more.gif" /></a></td>
   </tr>                                           
  </tbody>
</table>

原始问题

我发送了一封电子邮件，其中AddThis共享图标使用表格垂直间隔。它们在Thunderbird中正确显示，但在Gmail中间隔开。我不知道如何纠正这个问题，这里是一个如何区分的示例图片：

Spacing Screenshot

以下是构成AddThis代码的代码及其周围的代码（完整的电子邮件代码位于此下方）：

<table border="0" width="640">
     <tbody>
      <tr>
      <td style="width: 20px;">&nbsp;</td>
       <td style="width: 586px;">
       <div>
      <div align="center"><a href="img-link"><img alt="At Text" 
       src="img-src"></a></div>
           </div>
          </td>
             <td style="width: 20px;">
               <table border="0" height="498" width="20">
                  <tbody>
                     <tr>
                   <td style="height: 406px;">&nbsp;</td>
                         </tr>

<!-- ADD THIS CODE -->
                                  <tr>
  <td><a target="_blank" href="http://api.addthis.com/
    oexchange/0.8/forward/facebook/offer?pco=tbxnj-1.0&amp;url=share-url" 
 title="Share Via Facebook" style="color: rgb(243, 243, 243);">
 <img alt="Facebook" 
src="http://cache.addthis.com/icons/v1/thumbs/facebook.gif" 
style="border-width: 0px; border-style: solid; display: block;"></a></td>
         </tr>
        <tr>
 <td><a target="_blank" href="http://api.addthis.com/
  oexchange/0.8/forward/twitter/offer?pco=tbxnj-1.0&amp;url=share-url" 
title="Share Via Twitter" style="color: rgb(243, 243, 243);">
<img alt="Twitter" src="http://cache.addthis.com/icons/v1/thumbs/twitter.gif"
 style="border-width: 0px; border-style: solid; display: block;"></a></td>
    </tr>
       <tr>
   <td><a target="_blank" href="http://www.addthis.com/bookmark.php?
  source=tbxnj-1.0&amp;=250&amp;url=share-url" 
title="More Sharing Options" style="color: rgb(243, 243, 243);">
<img alt="More..." src="http://cache.addthis.com/icons/v1/thumbs/more.gif" 
style="border-width: 0px; border-style: solid; display: block;"></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>

以下是完整电子邮件的代码：

<table align="center" border="0" cellpadding="0" cellspacing="0" width="98%">
<tbody>
  <tr>
    <td style="background-color: rgb(0, 0, 0);" align="center">
     <table border="0" cellpadding="0" cellspacing="0" width="640">
       <tbody>
        <tr>
   <td style="font-family: arial,helvetica,sans-serif; 
       color: rgb(243, 243, 243); background-color: rgb(0, 0, 0);">
   <p><img alt=" Alt Text" src="img-src" 
          style="color: rgb(0, 0, 0);" height="1" width="1"></p>
 <table border="0" width="640">
     <tbody>
      <tr>
      <td style="width: 20px;">&nbsp;</td>
       <td style="width: 586px;">
       <div>
      <div align="center"><a href="img-link"><img alt="At Text" 
       src="img-src"></a></div>
           </div>
          </td>
             <td style="width: 20px;">
               <table border="0" height="498" width="20">
                  <tbody>
                     <tr>
                   <td style="height: 406px;">&nbsp;</td>
                         </tr>

<!-- ADD THIS CODE -->
                                  <tr>
  <td><a target="_blank" href="http://api.addthis.com/
    oexchange/0.8/forward/facebook/offer?pco=tbxnj-1.0&amp;url=share-url" 
 title="Share Via Facebook" style="color: rgb(243, 243, 243);">
 <img alt="Facebook" 
src="http://cache.addthis.com/icons/v1/thumbs/facebook.gif" 
style="border-width: 0px; border-style: solid; display: block;"></a></td>
         </tr>
        <tr>
 <td><a target="_blank" href="http://api.addthis.com/
  oexchange/0.8/forward/twitter/offer?pco=tbxnj-1.0&amp;url=share-url" 
title="Share Via Twitter" style="color: rgb(243, 243, 243);">
<img alt="Twitter" src="http://cache.addthis.com/icons/v1/thumbs/twitter.gif"
 style="border-width: 0px; border-style: solid; display: block;"></a></td>
    </tr>
       <tr>
   <td><a target="_blank" href="http://www.addthis.com/bookmark.php?
  source=tbxnj-1.0&amp;=250&amp;url=share-url" 
title="More Sharing Options" style="color: rgb(243, 243, 243);">
<img alt="More..." src="http://cache.addthis.com/icons/v1/thumbs/more.gif" 
style="border-width: 0px; border-style: solid; display: block;"></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </td>
                </tr>
                <tr>
                    <td style="color: rgb(243, 243, 243);" valign="top">
                    <div style="font-family: arial,helvetica,sans-serif;
 padding: 0pt 20px; color: rgb(243, 243, 243);">
                    <p>&nbsp;</p>
                    <p><a href="url" style="color: 
rgb(243, 243, 243); text-decoration: none;" title="text">
<img alt="UBhapE2 =&gt;" src="img-sr" 
style="border-width: 0px; border-style: solid;"></a>
<span class="textcenter"><br>
                    </span></p>
<p>text <a style="color: rgb(243, 243, 243);" 
title="View This E-Mail In Your Browser" href="url">text</a>. </p>
                    <p>text <a style="color: rgb(243, 243, 243);" 
title="text" href="url">text</a></p>
<p><a style="color: rgb(243, 243, 243);" 
title="text" href="url/">text</a></p>
                    <p text</p>
                    <div style="font-family: arial,helvetica,sans-serif;">
                    <p style="font-size: 12px;" align="center">text</p>
                    </div>
                    </div>
                    <div style="display: none;">{tag_unsubscribe}</div>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>
</table>

请记住这些是电子邮件，而不是javascript，只有内联CSS。

1 个答案:

答案 0 :(得分：1)

尝试为AddThis <td> - s

添加高度 
<td height="31">
    <a target="_blank" href="http://api.addthis.com/
    oexchange/0.8/forward/facebook/offer?pco=tbxnj-1.0&amp;url=share-url" 
    title="Share Via Facebook" style="color: rgb(243, 243, 243);">
    <img alt="Facebook" src="http://cache.addthis.com/icons/v1/thumbs/facebook.gif" 
    style="border-width: 0px; border-style: solid; display: block;"></a>
</td>
相关问题
最新问题