经过几天试图寻找解决方案（失败）后，我决定转向社区的集体智慧和经验寻求帮助。我
我有一个电子邮件模板，可以在所有桌面，网络和移动客户端上正确显示，但适用于Android的Gmail应用程序除外。我有一个嵌套的导航表（由顶部图像，导航本身和底部图像组成）。出于某种原因，Android版Gmail应用程序在嵌套导航表周围显示水平和垂直间隙。嵌套表应该跨越包含单元格的宽度（380px）和高度（85px），但不应该。此差距仅出现在适用于Android的Gamil应用程序中。
我附上了一个jpg作为参考。我在表格单元格中添加了绿色背景颜色，以便您可以看到间隙问题。
如果我将包含表格标签设置为style =“vertical-align：bottom;”，则间隙将显示在嵌套导航表的顶部。这会导致徽标错位。
如果我将包含表格标记设置为style =“vertical-align：top;”，则间隙将显示在嵌套导航表的底部。该表与徽标对齐，但现在我在底部导航图像和主要内容图像之间有一个间隙。
我在嵌套表的右侧也有一个间隙（因为包含的标签有align =“left”）。
我还在图片下面发布了整个代码，但嵌套表问题出现在“Preheader and Navigation”部分中。
感谢您的时间和指导。乔治。
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>
答案 0 :(得分：0)
不幸的是，gmail安卓应用程序在尝试将您的电子邮件适合屏幕时，会对图像和表格大小做一些奇怪的事情。大多数问题都可以通过为容器表提供内联min-width，或者通过提供图像display: block;并在需要时设置明确的高度和宽度来解决。
我找到了一个似乎是解决方案的解决方案here，但是，我没有运气实现它。也许你会有更好的运气，但你可能不得不改变你的HTML结构才能运作。具体来说，您可能必须用图像替换菜单文本链接。
总结解决方法：
重述问题 - 在调整表格大小时，Gmail应用会结束 缩小图像大小时。这可能导致之间出现1像素的间隙 桌子上的图像。
<tr>提供内联样式display: block; white-space: nowrap;。<td>提供内联样式display: inline-block;。<td>中删除任何宽度或高度声明。<td>之间的任何空格。min-width。Campaign Monitor's CSS Guide也可能对您有用。
以下是我尝试实施变通方法的代码：
<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>
答案 1 :(得分：0)
我尝试了 display: block 和 display: block 并且不起作用，但是 display: flex 中的 <tr> 适用于移动设备和所有电子邮件甚至桌面的电子邮件