问题
After days of of trying to find a solution(unsuccessfully), I've decided to turn to the collective wisdom and experience of the community for help. I
I have a email template that displays correctly across all desktop, web and mobile clients, except for the Gmail App for Android. I have a nested navigation table (which consists of a top image, the navigation itself and bottom image). For some reason the Gmail App for Android displays a horizontal and vertical gap around the nested navigation table. The nested table should span the width(380px) and height(85px) of the containing cell, but doesn't. This gap only appears in the Gamil App for Android.
I've attached a jpg as reference. I added a green background color to the table cell so you can see the gap issue.
If I set the containing table tag to style="vertical-align:bottom;", the gap appears at the top of the nested navigation table. This causes a mislaignment with the logo.
If I set the containing table tag to style="vertical-align:top;", the gap appears at the bottom of the nested navigation table. The table is aligned with the logo, but now I have a gap between the bottom navigation image and main content image.
I also have a gap on the right side of the nested table (since thecontaining tag has align="left").
I've also posted the entire code under the image, but the nested table issue appears in the "Preheader and Navigation" section.
Thank you for your time and guidance. George.
http://epidm.edgesuite.net/CMS/YH/gmailapp.jpg
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="margin:0; background-color:#000000;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="000000;" style="table-layout:fixed;">
<tr>
<td align="center" valign="top" style="background-color:#000000;">
<!--Preheader and Navigation-->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;">
<tr>
<td align="right" style="vertical-align:middle; padding:5px 10px 5px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#a88156;">Make us part of your resolutions in 2015 – look inside to <strong><a href="#" target="_blank" style="color:#a88156;">see how</a></strong>!</td>
</tr>
<tr>
<td align="center" style="vertical-align:top; padding:0px 0px 0px 0px;" bgcolor="00ff66">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px;">
<tr>
<td width="220" height="85" align="left" style="vertical-align:top; line-height:85px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td>
<td width="380" height="85" align="left" style="vertical-align:top;">
<table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;">
<tr>
<td width="380" height="15" align="center" style="vertical-align:top; line-height:15px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td>
</tr>
<tr>
<td height="52" align="center" bgcolor="#555555" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td>
</tr>
<tr>
<td width="380" height="18" align="center" style="vertical-align:top; line-height:18px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Panel 1-->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#e5e5e5" style="min-width:600px;">
<tr>
<td align="center" valign="top" style="padding:0px 0 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_04y.jpg" width="600" height="252" alt="" title="" border="0" style="display:block;"/></a></td>
</tr>
<tr>
<td align="center" valign="top" style="padding:20px 10px 20px 10px;">
<table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" style="vertical-align:top; padding:0px 0px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td>
</tr>
<tr>
<td align="left" style="vertical-align:top; padding:15px 60px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td>
</tr>
<tr>
<td align="left" style="vertical-align:top; padding:20px 0px 0px 10px;">
<table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Panel 2-->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;">
<tr>
<td align="right" valign="top" style="padding:20px 0px 0px 0px;">
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#aaaaaa">
<tr>
<td align="left" valign="top" style="padding:0 20px 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_05y.gif" width="300" height="260" alt="" title="" border="0" style="display:block;" /></a></td>
<td align="right" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 80px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:15px 45px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:20px 0px 0px 0px;">
<table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--SOCIAL-->
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;">
<tr>
<td align="center" style="vertical-align:top; padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; font-weight:bold; padding:0px 0px 0px 0px;">#QWERTYUIOP</td>
<td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td>
<td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td>
<td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--LEGAL-->
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;">
<tr>
<td align="center" valign="top" style="padding:25px 0;">
<table width="320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-right:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">POIUYTREW</a></td>
<td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;" alt="" /></td>
<td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding:0px 20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">LKJHG</a></td>
<td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;" alt="" /></td>
<td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-left:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">MNBV CXZLK</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td>
</tr>
<tr>
<td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 0px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Contact Us</a> | <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Legal Notices</a> | <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Unsubscribe</a></td>
</tr>
<tr>
<td align="center" style="padding:2px 0px 10px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Qwertyu Asdfgh / Awer Asdfghu Tyuiop</a></td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" align="left" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
回答1:
Unfortunately the gmail android app does some strange things with image and table sizes while trying to fit your email to the screen. Most issues can be solved by giving the container table an inline min-width, or by giving your images display: block; and setting explicit heights and widths where needed.
Your case, however, is a little different. The problem seems to appear when you nest a table with multiple rows of images inside of a cell whos siblings have no such nested tables. Here is another example of this problem.
I have found what appears to be a workaround solution here, however, I have had no luck implementing it. Maybe you will have better luck, but you may have to change your HTML structure for it to work. Specifically, you may have to replace your menu text links with images.
To sum up the workaround:
Restating the problem - Gmail app rounds up when resizing tables, and down when resizing images. This can cause a 1 pixel gap appear between images on a table.
- Give all
<tr>s an inline style ofdisplay: block; white-space: nowrap;. - Give all
<td>s an inline style ofdisplay: inline-block;. - Remove any width or height declarations from your
<td>s. - Remove any whitespace between your
<td>s. - Ensure that your container table has a
min-width.
Campaign Monitor's CSS Guide may also be of use to you while troubleshooting this issue.
Here is your code with my attempt at implementing the workaround:
<table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px; background-color: green;">
<tr style="display: block; white-space: nowrap;">
<td align="left" style="vertical-align:top; line-height:85px;display: inline-block;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td><td align="left" style="vertical-align:top;display: inline-block;">
<table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;">
<tr style="display: block; white-space: nowrap;">
<td align="center" style="vertical-align:top; line-height:15px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td>
</tr>
<tr>
<td width="380" height="52" align="center" bgcolor="#555555" style="vertical-align:center; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td>
</tr>
<tr style="display: block; white-space: nowrap;">
<td align="center" style="vertical-align:top; line-height:18px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
来源：https://stackoverflow.com/questions/27784834/table-gap-issue-in-gmail-app