Gmail/Chrome HTML電子郵件中的額外行空間

我一直在爲服務器年創建HTML電子郵件，並且從未遇到過這個問題。Gmail/Chrome HTML電子郵件中的額外行空間

在下面的代碼中，我得到一個3像素的空間在有7列的行末尾。我做錯了什麼或者是gmail爲表中的每一行添加一個pix列寬度。

我只在使用Chrome時遇到過gGmail。它不以任何其它電子郵件客戶端或瀏覽器（甚至是Gmail帳戶）

smaple

<tr> 
     <td width="588"> 
      <table border="0" cellpadding="0" cellspacing="0" width="588" align="center"> 
       <tr> 
        <td colspan="7" width="588"><img src="imgs/header2.gif" alt="View Our Latest Newsletter" width="588" height="48" border="0" style="display: block;"></td> 
       </tr> 
         <tr width="588"> 
          <td width="85"><a href="http://www.#.com"><img src="imgs/racing_menu_racing.gif" alt="" width="85" height="18" border="0" style="display: block;"></a></td> 
          <td width="64"><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td> 
          <td width="76"><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td> 
          <td width="58"><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td> 
          <td width="82"><a href="http://#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td> 
          <td width="66"><a href="http://#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="# Racing News" width="66" height="18" border="0" style="display: block;"></a></td> 
          <td width="157"><a href="http://www.#.com"><img src="imgs/racing_menu_bwcom.gif" alt="Media" width="157" height="18" border="0" style="display: block;"></a></td> 
         </tr> 
         <tr> 
          <td colspan="7" width="588"><a href="http://www.#.com"><img src="imgs/Top-ImageRace.jpg" width="588" height="93" border="0" style="display: block;"></a></td> 
         </tr>      
      </table> 



     </td> 
    </tr> 
    <tr> 
     <td width="588"> 

      <table style="font-family: Arial,Helvetica,sans-serif; font-size:14px; color:#444;" align="center" border="0" cellpadding="5" cellspacing="0" width="588"> 
       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 1</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2" width="226"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1a</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1- Ex. Drivers tend to get all of the credit when they win a race, but as the BMW experts at # reminded...<br /><br /> 
        <a href="http://www.#.com/#-returns-to-grand-am-victory-lane-at-barber-motorsports-park.html"><strong>READ MORE 1a</strong></a> *|FACEBOOK:LIKE:http://www.#.com|*</a> 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 



       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 2</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1b</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1 - Ex, Celebrate our 3-car assault with this comfortable, distinctive, and and classy T-shirt...<br /><br /> 
        <a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><strong>READ MORE 1b</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|* 
        </td> 
       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr>  
        <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2c</td> 

       </tr> 
       <tr> 
        <td valign="top">Body Text 2 - Ex. As in any performance application, replacing squishy rubber parts with a performance piece will increase response...<br /><br /> 
        <a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><strong>READ MORE 2c</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|* 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 



       <tr> 
        <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 3</td> 

       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr height="10"> 
        <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td> 

       </tr> 
       <tr> 
        <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1d</td>  
       </tr> 
       <tr> 
        <td valign="top">Body Text 1 - Ex. Get a sneak peek at our new # Racing website. Jam-packed with all the media...<br /><br /> 
        <a href="http://www.#.com/"><strong>READ MORE 1d</strong></a>*|FACEBOOK:LIKE:http://www.#.com|* </td> 
       </tr> 
       <tr height="5"> 
        <td height="5"></td> 
        <td height="5"></td> 
       </tr> 
       <tr>  
        <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td> 
        <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2e</td> 

       </tr> 
       <tr> 
        <td valign="top"> Body Text 2 - Ex. Grassroots features James Clay's ultimate wagon, a '95 M50 turbo hauler. said "The car...<br /><br /> 
        <a href="http://grassrootsmotorsports.com/articles/war-wagons/"><strong>READ MORE 2e</strong></a>*|FACEBOOK:LIKE:http://#.com/articles/war-wagons/|* 
        </td> 
       </tr> 
       <tr height="10"> 
        <td height="10"></td> 
        <td height="10"></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 


    <tr> 
     <td width="588"><a href="http://www.#.com/sponsor.html"><img src="imgs/sponsors12.jpg" width="588" height="440" border="0" style="display: block;"></a> 
     </td> 
    </tr> 
    <tr> 
     <td width="588"> 


     <table style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;color:#656565;" align="center" border="0" cellpadding="0" cellspacing="0" width="588"> 
      <tr> 
          <td><a href="http://www.#.com/"><img src="imgs/racing_menu_racing.gif" alt="# Racing" width="85" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://www.#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="#.com" width="66" height="18" border="0" style="display: block;"></a></td> 
          <td><a href="http://#.com/"><img src="imgs/racing_menu_bwcom.gif" alt="#.com" width="157" height="18" border="0" style="display: block;"></a></td> 
         </tr> 
      <tr> 
       <td colspan="7">&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="7" style="font-size:10px;text-align:center;"><p>&copy; 2012 <a href="http://www.#.com/"><font color="#333795">#</font></a> | | <a href="mailto:[email protected]#.com"><font color="#333795"><u>[email protected]#.com</u></font></a></p></td> 
      </tr> 
      <tr> 
       <td colspan="7" style="font-size:10px;text-align:center;">If you are no longer interested click <a href="*|UNSUB|*">HERE</a>. Click <a href="*|ARCHIVE|*">HERE</a> to view this email in your browser.</td> 
      </tr> 
     </table> 

     </td> 
    </tr> 
</tbody> 
</table> 
</body></html>

來源

2012-04-11 Cory1970

發生

我其實只是固定了類似的錯誤，但涉及段落標記雖然錯誤也出現在Opera中。

我的猜測是表格正在繼承Gmail默認樣式的額外空間。通過元素檢查器（我最喜歡歌劇的蜻蜓）來看看是否有任何東西似乎繼承了一個奇怪的屬性，如繼承的1 em或繼承2 px。如果發生這種情況，您將不得不使用內聯屬性覆蓋它。請記住，受影響的元素可能不明顯，因爲我必須爲我的段落標記設置margin-top和margin-bottom，因爲Opera的inspect元素會導致繼承問題，而Chrome只會顯示錶格繼承cellpacing，即使我的表格像您一樣將cellspacing設置爲0。

希望幫助某人

來源

2012-06-05 18:44:40 twunde

它通常發生在我的圖片標籤下。添加「顯示：塊;」圖像和應該工作。

來源

2016-10-18 17:57:40 FNunez

Gmail/Chrome HTML電子郵件中的額外行空間

回答

相關問題