在Gmail应用程序表差距问题 [英] Table Gap Issue in Gmail App
本文介绍了在Gmail应用程序表差距问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
后的试图找到一个解决方案（失败）天，我已经决定把集体的智慧和社会各界的帮助的经验。我
我有正确显示在所有桌面，Web和移动客户端，除了Android版Gmail应用电子邮件模板。我有一个嵌套的导航台（其中包括顶级的图像，导航本身和底部的图片）。出于某种原因，Android版Gmail应用会显示周围的嵌套导航表中的水平和垂直间隙。嵌套表应跨越含有细胞的宽度（380px）和高度（85px），但没有。这种差距不仅出现在贾米勒应用程序为Android。
我已经附加了JPG作为参考。我增加了一个绿色的背景颜色的表格单元格，所以你可以看到的差距问题。
如果我的表包含标记设置为风格=垂直对齐：底部;缺口出现在嵌套浏览表格的顶部。这将导致与徽标mislaignment。
如果我的表包含标记设置为风格=垂直对齐：首位;缺口出现在嵌套表航行的底部。该表与标识一致，但现在我有底部的导航图像和主要内容的图像之间的差距。
我也对嵌套表的右侧的间隙（因为thecontaining标签具有对齐=左）。
我还张贴图片下的整个code，但嵌套表问题出现在preheader和导航部分。
感谢您的时间和指导。乔治。
http://epidm.edgesuite.net/CMS/YH/gmailapp.jpg
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度/＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT; /头＆GT;＆LT;车身风格=保证金：0;背景颜色：＃000000;＆GT;
＆LT;表格的宽度=100％BORDER =0CELLSPACING =0的cellpadding =0ALIGN =中心的bgcolor =000000;风格=表格的布局：固定;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =顶的风格=背景颜色：＃000000;＆GT;
＆LT;！ - preheader和导航 - ＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0ALIGN =中心的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =正确的风格=垂直对齐：中;填充：为5px 10px的为5px 10px的; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：12px的;颜色：＃a88156;＆GT;让我们为您的决议的一部分，在2015年 - 往里到＆lt;强＆GT;＆LT; A HREF =＃目标=_空白的风格=COLOR：＃a88156;＆GT;看到＆LT; / A＆GT;＆LT; / STRONG＆GT ;！＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：顶部;填充：0像素0像素0像素0像素; BGCOLOR =00ff66＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD WIDTH =220HEIGHT =85align =left的风格=垂直对齐：首位;线高度：85px;＆GT;＆LT; A HREF =＃目标=_空白＆GT ;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpgWIDTH =220HEIGHT =85ALT =LOGO称号=LOGO的风格=显示：块;边界：0; /＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; TD WIDTH =380HEIGHT =85align =left的风格=垂直对齐：首位;＆GT;
＆LT;表格的宽度=380BORDER =0CELLSPACING =0的cellpadding =0的风格=最小宽度：380px;＆GT;
＆所述; TR＆GT;
＆LT; TD WIDTH =380HEIGHT =15ALIGN =中心的风格=垂直对齐：首位;线高度：15px的;＆GT;＆LT; IMG SRC =HTTP：//epidm.edgesuite。净/ CMS / YH / yh_wk33_Resolutions_02y.gifWIDTH =380HEIGHT =15的风格=显示：块;边界=0ALT =/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD高度=52ALIGN =中心的bgcolor =＃555555的风格=垂直对齐：中间; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;字体重量：大胆;颜色：#FFFFFF;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; QWERTYUIO＆LT; / A＆GT; ＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT;航空自卫队＆LT; / A＆GT; ＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; ZXCV BNMLK＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD WIDTH =380HEIGHT =18ALIGN =中心的风格=垂直对齐：首位;行family：宋体;＆GT;＆LT; IMG SRC =HTTP：//epidm.edgesuite。净/ CMS / YH / yh_wk33_Resolutions_03y.jpgWIDTH =380HEIGHT =18的风格=显示：块;边界=0ALT =/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - 面板1 - ＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0ALIGN =中心的bgcolor =＃e5e5e5的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =顶的风格=填充：0像素0 0 0;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =HTTP：/ /epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_04y.jpgWIDTH =600HEIGHT =252ALT =标题=BORDER =0的风格=显示：块;/＆GT;＆LT ; / A＆GT;＆下; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =顶的风格=填充：20像素20像素10px的10px的;＆GT;
＆LT;表格的宽度=580BORDER =0CELLSPACING =0的cellpadding =0ALIGN =中心＆GT;
＆所述; TR＆GT;
＆LT; TD align =left的风格=垂直对齐：顶部;填充：0像素0像素0像素10px的; FONT-FAMILY：宋体，黑体，无衬线;字体大小：18像素;字体重量：大胆;颜色： ＃000000;＆GT; MNBVCXZL KJHG POIUYTREWQA＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD align =left的风格=垂直对齐：顶部;填充：15px的60像素0像素10px的; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;颜色：＃000000;＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD align =left的风格=垂直对齐：顶部;填充：20px的0像素0像素10px的;＆GT;
＆LT;表格的宽度=134HEIGHT =41align =leftBORDER =0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =中间的风格=填充：0像素0像素0像素0像素; FONT-FAMILY：宋体，黑体，无衬线;字体大小：18像素;颜色：#FFFFFF;背景色： ＃95553a;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无; FONT-SIZE：14px的;＆GT;＆LT; IMG SRC =HTTP： //epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gifWIDTH =134HEIGHT =40ALT =CTA称号=CTABORDER =0的风格=显示：块;/ ＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - 面板2 - ＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0ALIGN =中心的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =权利VALIGN =顶的风格=填充：20像素0像素0像素0像素;＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0的bgcolor =＃AAAAAA＆GT;
＆所述; TR＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：0 20px的0 0;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =HTTP：/ /epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_05y.gifWIDTH =300HEIGHT =260ALT =标题=BORDER =0的风格=显示：块; /＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; TD ALIGN =权利VALIGN =顶＆GT;
＆LT;表格边框=0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：15px的80px 0像素0像素; FONT-FAMILY：宋体，黑体，无衬线;字体大小：18像素;字体重量：大胆;颜色：＃ 000000;＆GT; MNBVCXZL KJHG POIUYTREWQA＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：15px的×45像素0像素0像素; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;颜色：＃000000;＆GT;的Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：20像素0像素0像素0像素;＆GT;
＆LT;表格的宽度=134HEIGHT =41align =leftBORDER =0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =中间的风格=填充：0像素0像素0像素0像素; FONT-FAMILY：宋体，黑体，无衬线;字体大小：18像素;颜色：#FFFFFF;背景色： ＃95553a;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无; FONT-SIZE：14px的;＆GT;＆LT; IMG SRC =HTTP： //epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gifWIDTH =134HEIGHT =40ALT =CTA称号=CTABORDER =0的风格=显示：块;/ ＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - 社会 - ＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0的bgcolor =＃000000ALIGN =中心的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：顶部;填充：20像素0 0 0;＆GT;
＆LT;表格边框=0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：中间; FONT-FAMILY：宋体，黑体，无衬线;字体大小：18像素;颜色：#FFFFFF;字体重量：大胆的;填充：0像素0像素0像素0像素;＆GT;＃QWERTYUIOP＆LT; / TD＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：0 0 0 15px的;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =HTTP：/ /epidm.edgesuite.net/CMS/YH/yh_09.jpgWIDTH =45HEIGHT =44ALT =标题=的风格=显示：块;边界：0; /＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：0 0 0 15px的;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =HTTP：/ /epidm.edgesuite.net/CMS/YH/yh_09.jpgWIDTH =45HEIGHT =44ALT =标题=的风格=显示：块;边界：0; /＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; TD align =leftVALIGN =顶的风格=填充：0 0 0 15px的;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =HTTP：/ /epidm.edgesuite.net/CMS/YH/yh_09.jpgWIDTH =45HEIGHT =44ALT =标题=的风格=显示：块;边界：0; /＆GT;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - 法律 - ＆GT;
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0的bgcolor =＃000000ALIGN =中心的风格=最小宽度：600像素;＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心VALIGN =顶的风格=填充：25px的0;＆GT;
＆LT;表格的宽度=320BORDER =0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =权利VALIGN =中间的风格=FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;颜色：#FFFFFF;填充右：20像素;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; POIUYTREW＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; TD ALIGN =中心VALIGN =中间＆GT;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gifWIDTH =2HEIGHT =21的风格=显示：块; ALT =/＆GT;＆LT; / TD＆GT;
＆LT; TD ALIGN =中心VALIGN =中间的风格=FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;颜色：#FFFFFF;填充：0像素20像素;＆GT;＆LT;一HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; LKJHG＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; TD ALIGN =中心VALIGN =中间＆GT;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gifWIDTH =2HEIGHT =21的风格=显示：块; ALT =/＆GT;＆LT; / TD＆GT;
＆LT; TD ALIGN =中心VALIGN =中间的风格=FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;颜色：#FFFFFF;填充左：20像素;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; MNBV CXZLK＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD align =left的风格=垂直对齐：首位;＆GT;
＆LT;表格的宽度=100％BORDER =0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：顶部;填充：0像素为20px 12px的20像素; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：10px的;颜色：#FFFFFF;＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：顶部;填充：0像素为20px 12px的20像素; FONT-FAMILY：宋体，黑体，无衬线;字体大小：11像素;颜色：#FFFFFF;＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT劳动＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=填充：0像素0像素0像素0像素，垂直对齐：首位; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：12px的;颜色：#FFFFFF;＆GT; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT;联系我们＆LT; / A＆GT; ＆放大器; NBSP; |＆放大器; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT;法律声明＆LT; / A＆GT; ＆放大器; NBSP; |＆放大器; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT;＆退订LT; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD ALIGN =中心的风格=填充：2px的0像素10px的0像素，垂直对齐：首位; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：12px的;颜色：#FFFFFF;＆GT; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; Qwertyu Asdfgh / AWER Asdfghu Tyuiop＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;表ALIGN =中心WIDTH =600BORDER =0CELLSPACING =0的cellpadding =0＆GT;
＆所述; TR＆GT;
＆LT; TD高度=20align =leftVALIGN =顶＆GT;＆安培; NBSP;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
不幸的是，Android版Gmail应用程序做一些具有图像和表格大小奇怪的事情，而试图以适应您的电子邮件到屏幕上。 最小宽度，或者通过给你的图片显示解决>并根据需要设置明确的高度和宽度。
您情况，但是，有一点不同。这个问题似乎出现时，你巢卫生组织兄弟姐妹在单元格中图像的多个行的表有没有这样的嵌套表格。 下面是此问题的的另一例子。
我发现这似乎是一种解决方法解决这里，不过，我没有运气实现它。也许你会有更好的运气，但你可能要改变你的HTML结构为它工作。具体而言，您可能要替换图片您的菜单文字链接。
综上所述变通方法：
再论问题 - 调整表时，Gmail应用查房了，
向下调整图像大小时。这可能会导致之间的1个像素的间隙出现
桌子上的图像。
- 给所有的
＆LT; TR＆GT;所组成的内嵌样式显示：块;空格：NOWRAP;- 给所有的
＆LT; TD＆GT;s ^显示的内嵌样式：inline-block的;- 从你的
＆LT删除任何宽度或高度声明; TD方式＆gt;取值- 删除之间的任何空白你的
＆LT; TD方式＆gt;取值- 确保您的容器表中有一个
最小宽度。运动监视器的CSS指南也可能是使用你，而解决这个问题。
这是你的code。与我在实施此变通办法的尝试：
＆LT;表格的宽度=600BORDER =0CELLSPACING =0的cellpadding =0的风格=最小宽度：600像素;背景色：绿色; ＆GT;
＆LT; TR风格=显示：块;空白：NOWRAP;＆GT;
＆LT; TD align =left的风格=垂直对齐：首位;线高度：85px;显示：inline-block的;＆GT;＆LT; A HREF =＃目标=_空白＆GT;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpgWIDTH =220HEIGHT =85ALT =LOGO称号=LOGO的风格=显示：块;边界： 0; /＆GT;＆LT; / A＆GT;＆LT; / TD＆GT;＆LT; TD align =left的风格=垂直对齐：首位;显示：inline-block的;＆GT;
＆LT;表格的宽度=380BORDER =0CELLSPACING =0的cellpadding =0的风格=最小宽度：380px;＆GT;
＆LT; TR风格=显示：块;空白：NOWRAP;＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：首位;线高度：15px的;显示：inline-block的;＆GT;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/ YH / yh_wk33_Resolutions_02y.gifWIDTH =380HEIGHT =15的风格=显示：块;边界=0ALT =/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD WIDTH =380HEIGHT =52ALIGN =中心的bgcolor =＃555555的风格=垂直对齐：中心; FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：15px的;字体重量：大胆;颜色：#FFFFFF;＆GT;＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; QWERTYUIO＆LT; / A＆GT; ＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT;航空自卫队＆LT; / A＆GT; ＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP; ＆LT; A HREF =＃目标=_空白的风格=颜色：#FFFFFF;文字修饰：无;＆GT; ZXCV BNMLK＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR风格=显示：块;空白：NOWRAP;＆GT;
＆LT; TD ALIGN =中心的风格=垂直对齐：首位;行family：宋体;显示：inline-block的;＆GT;＆LT; IMG SRC =http://epidm.edgesuite.net/CMS/ YH / yh_wk33_Resolutions_03y.jpgWIDTH =380HEIGHT =18的风格=显示：块;边界=0ALT =/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;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>
解决方案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 imagesdisplay: 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>
这篇关于在Gmail应用程序表差距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://epidm.edgesuite.net/CMS/YH/gmailapp.jpg](\"http://epidm.edgesuite.net/CMS/YH/gmailapp.jpg\"){kind=link}
