出现在电子邮件中只有Android版Gmail的差距。我该如何解决这个问题? [英] Gaps appearing in an email in only Android Gmail. How do I fix this issue?

查看:208
本文介绍了出现在电子邮件中只有Android版Gmail的差距。我该如何解决这个问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在所有电子邮件客户端完美的作品(观之,iOS的,石蕊等),除了Gmail应用程序在Android上的电子邮件。

在该应用程序有缺口出现在其中。这是问题的截图,这是概念的只是一个基本的证明:

有些HTML低于,这个问题在表格单元格嵌套表格(TD)发生。因此,这有一组表格和细胞图像内是其细胞的大小相同。

下面是一个HTML的jsfiddle: http://jsfiddle.net/cntdsp5p/

这里是HTML:

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.0过渡// ENhttp://www.w3.org/TR/REC-html40/ loose.dtd>
< HTML风格=的margin-top:0像素重要;填充顶:!0像素重要>
< HEAD>
<风格类型=文/ CSS>
    HTML,身体{的margin-top:0像素重要;!填充顶:0像素重要;! }
    身体{背景颜色:#FFFFFF;的margin-top:0像素重要;填充顶:0像素重要;! FONT-FAMILY:无衬线; }
    {表的margin-top:0像素重要;!填充顶:0像素重要;! }
    一个IMG {颜色:#000001重要的; }.wysiwyg文本对齐,右{文本对齐:权利; }
.wysiwyg文本对齐中心{文本对齐:中心; }
.wysiwyg文本对齐左的{text-align:left进行; }
.wysiwyg文本对齐对齐{文本对齐:理由; }身体{文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体; }H1 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:36px;行高:44px; }H2 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:24px的;行高:32PX; }H3 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:15像素;行高:21px; }p {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体; }是{text-阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#1122CC重要;文字修饰:下划线; }
        的.mi-所有{显示:块; }
        的.mi桌面{显示:块; }    的.mi移动{
        显示:无;
        字体大小:0;
        最大高度:0;
        行高:0;
        填充:0;
        浮动:左;
        溢出:隐藏;
        MSO隐藏:所有;在Outlook 2007-2013 / *隐藏元素* /
    }
< /风格><风格类型=文/ CSS>    @media只有屏幕(最大设备宽度:480像素),屏幕(最大宽度:480像素),屏幕(方向:横向)和(最大宽度:630像素){        /* 很重要!所有除所有该电流型得到显示:无; * /
        的.mi桌面{显示:无重要; }        / *然后显示一移动* /
        的.mi移动{
            !显示:块重要;
            字体大小:12px的重要;
            最大高度:无重要;
            行高:1.5重要;
            飘:无重要;
            !溢出:可见重要的;
        }
    }< /风格>
   < META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8>< /头>
<车身风格=背景:#FFFFFF;颜色:#000000重要; FONT-FAMILY:宋体; FONT-SIZE:14px的;行-family:宋体;保证金:0像素0 0 0像素;填充:0像素0 0;文-shadow:无的bgcolor =#FFFFFF>
<风格类型=文/ CSS>
身体 {
的margin-top:0像素重要;填充顶:0像素重要;!
}
身体 {
背景颜色:#FFFFFF;的margin-top:0像素重要;填充顶:0像素重要;! FONT-FAMILY:无衬线;
}
身体 {
文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体;
}
< /风格>
< - 管理 - >< D​​IV CLASS =MI-桌面的风格!=显示:块>
    <表格的宽度=100%CELLSPACING =0的cellpadding =0ALIGN =中心的风格=背景:#FFFFFF;边界崩溃:崩溃;边框间距:0像素;边界:0像素无;保证金:0像素;填充:0像素的bgcolor =#FFFFFF>
        <&TBODY GT;
            < TR ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                < TD VALIGN =顶ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                    <表格的宽度=100%CELLSPACING =0的cellpadding =0边界=0ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;保证金:0像素;填充:0像素>
                        <&TBODY GT;
                                < TR align =left的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                                    < TD WIDTH =100%>
                                        <表格的宽度=100%CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;的margin-top:0像素!重要;填充顶:0像素重要>
                                            <&TBODY GT;
                                                < TR align =left的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                                                    < TD WIDTH =100%>
                                                        <表格的宽度=100%CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;的margin-top:0像素!重要;填充顶:0像素重要>
                                                            <&TBODY GT;
                                                                < TR风格=边界崩溃:崩溃;边框间距:0像素,边框:0;高度:50px​​的>
< TD WIDTH =100%VALIGN =顶HEIGHT =50align =left的风格=背景:#FFFFFF的bgcolor =#FFFFFF>< IMG WIDTH =1HEIGHT = 50的风格=边界:0;显示:块;线高度:1;不透明:0;填充:0像素SRC =htt​​p://mailrox-prod.s3.amazonaws.com/clear.gifALT =>&下; / TD>
                                                                < / TR>
                                                            < / TBODY>
                                                        < /表>
                                                    < / TD>
                                                < / TR>
                                            < / TBODY>
                                        < /表>
                                    < / TD>
                                < / TR>
                            < / TBODY>
                        < /表>
                    < / TD>
                < / TR>
        < / TBODY>
    < /表>
< / DIV>
<表ALIGN =中心的cellpadding =0CELLSPACING =0WIDTH =100%的风格=背景:#FFFFFF;边界崩溃:崩溃;边框间距:0;边框:0;保证金: 0像素0 0;填充:0像素0 0的bgcolor =#FFFFFF>
< TR ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0;边框:0>
                        < TD ALIGN =中心VALIGN =顶的风格=边界崩溃:崩溃;边框间距:0;边框:0>< D​​IV CLASS =MI-一切的风格=显示:块>
    <表类=MI-所有WIDTH =566ALIGN =中心CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;显示:块;保证金:0像素0 0;填充:0像素0>
        <&TBODY GT;
                < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =566HEIGHT =117align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218755/490d09a47432a346ff8b0e78081c0893-original.jpg?1423832407\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =62HEIGHT =208align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218759/19ddd566053aea03ffa236be1c3c7106-original.jpg?1423832410\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =437align =leftVALIGN =顶>
    <表格的宽度=437ALIGN =中心CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;保证金:0像素0 0;填充:0像素0>
        <&TBODY GT; < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =437HEIGHT =75align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218763/34af46b5e9b769c00b2ecdb0e18fb2f6-original.jpg?1423832414\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =96高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =52高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =83高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =40高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =42高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =41高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素>< / TD>                            < TD WIDTH =83高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =437HEIGHT =84align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218766/674169b8b96dea256dd794836c855230-original.jpg?1423832416\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
< / TBODY>
    < /表>
< / TD>                            < TD WIDTH =67HEIGHT =208align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218762/425f7c48b0e4215a8f3109dc03927e76-original.jpg?1423832412\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =566HEIGHT =185align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218758/8eb37cb41486fd5f0528650bea1fe398-original.jpg?1423832409\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>        < / TBODY>
    < /表>
< / DIV>
                        < / TD>
                    < / TR>
            < /表>  < /身体GT;
< / HTML>

这再次电子邮件完美的作品,除了Android版Gmail应用的一切,我很想知道如何解决它。

感谢。


解决方案

给你的表格 CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边界:无;和图像风格=显示:块;无疑是一个良好的开端,但可悲的是Gmail的Andr​​oid应用做一些与图像尺寸超奇怪的事情。它涉及到应用程序如何试图使邮件适合您的屏幕(您可能会注意到纵向和横向模式之间的差异)。


解决方案水平的差距(COLS之间):

要解决这个水平的差距,你可以给你的图片宽度的内嵌样式:100%; 同时给父< TD> 元素最小宽度: - PX; 。你甚至可以逃脱只是最小宽度声明,如果你把它正确的元素。


解决垂直间距(行间):

这会再离开你了两个垂直间距,其中一个很容易通过给你的所有图片的宽度和高度属性的照顾。务必确保为给所有固定大小的图像,一个明确的宽度和高度。

第二个垂直间距是很难对付的。这一次似乎出现时,你巢卫生组织兄弟姐妹在单元格中图像的多个行的表有没有这样的嵌套表格。 下面是此问题的的另一例子。的目前,我没有一个解决方案,这种类型的差距......我会张贴在这里,如果我找到,或想出之一。

编辑:

我发现这似乎是一种解决方法解决这里,不过,我没有运气实现它。也许你会有更好的运气,但你可能要改变你的HTML结构为它工作。综上所述变通方法:


  

再论问题 - 调整表时,上下调整图像大小时,Gmail应用四舍五入。这会导致图像之间的1个像素的间隙出现在一个表



  1. 给所有的< TR> 所组成的内嵌样式显示:块;空格:NOWRAP;

  2. 给所有的< TD> s ^ 显示的内嵌样式:inline-block的;

  3. 从你的&LT删除任何宽度或高度声明; TD> 取值包括最小宽度的风格,我们加入到固定水平的差距(不再是必要的)。

  4. 删除之间的任何空白你的< TD方式> 取值

  5. 确保您的容器表中有一个最小宽度

运动监视器的CSS指南也可能是使用你,而解决这个问题。


这是你的code。与我的第一个修改(一个垂直间隔,没有解决方法):

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.0过渡// ENhttp://www.w3.org/TR/REC-html40/ loose.dtd>
< HTML风格=的margin-top:0像素重要;填充顶:!0像素重要>
< HEAD>
<风格类型=文/ CSS>
    HTML,身体{的margin-top:0像素重要;!填充顶:0像素重要;! }
    身体{背景颜色:#FFFFFF;的margin-top:0像素重要;填充顶:0像素重要;! FONT-FAMILY:无衬线; }
    {表的margin-top:0像素重要;!填充顶:0像素重要;! }
    一个IMG {颜色:#000001重要的; }.wysiwyg文本对齐,右{文本对齐:权利; }
.wysiwyg文本对齐中心{文本对齐:中心; }
.wysiwyg文本对齐左的{text-align:left进行; }
.wysiwyg文本对齐对齐{文本对齐:理由; }身体{文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体; }H1 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:36px;行高:44px; }H2 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:24px的;行高:32PX; }H3 {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;!字体重量:400; FONT-FAMILY:宋体;字体大小:15像素;行高:21px; }p {文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体; }是{text-阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#1122CC重要;文字修饰:下划线; }
        的.mi-所有{显示:块; }
        的.mi桌面{显示:块; }    的.mi移动{
        显示:无;
        字体大小:0;
        最大高度:0;
        行高:0;
        填充:0;
        浮动:左;
        溢出:隐藏;
        MSO隐藏:所有;在Outlook 2007-2013 / *隐藏元素* /
    }
< /风格><风格类型=文/ CSS>    @media只有屏幕(最大设备宽度:480像素),屏幕(最大宽度:480像素),屏幕(方向:横向)和(最大宽度:630像素){        /* 很重要!所有除所有该电流型得到显示:无; * /
        的.mi桌面{显示:无重要; }        / *然后显示一移动* /
        的.mi移动{
            !显示:块重要;
            字体大小:12px的重要;
            最大高度:无重要;
            行高:1.5重要;
            飘:无重要;
            !溢出:可见重要的;
        }
    }< /风格>
   < META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8>< /头>
<车身风格=背景:#FFFFFF;颜色:#000000重要; FONT-FAMILY:宋体; FONT-SIZE:14px的;行-family:宋体;保证金:0像素0 0 0像素;填充:0像素0 0;文-shadow:无的bgcolor =#FFFFFF>
<风格类型=文/ CSS>
身体 {
的margin-top:0像素重要;填充顶:0像素重要;!
}
身体 {
背景颜色:#FFFFFF;的margin-top:0像素重要;填充顶:0像素重要;! FONT-FAMILY:无衬线;
}
身体 {
文字阴影:无;填充顶:0;填充右:0;填充底:0;填充左:0;的margin-top:0;保证金右:0;保证金底:0;保证金左:0;颜色:#000000重要的;! FONT-FAMILY:宋体;字体大小:14px的;行-family:宋体;
}
< /风格>
< - 管理 - >< D​​IV CLASS =MI-桌面的风格!=显示:块>
    <表格的宽度=100%CELLSPACING =0的cellpadding =0ALIGN =中心的风格=背景:#FFFFFF;边界崩溃:崩溃;边框间距:0像素;边界:0像素无;保证金:0像素;填充:0像素的bgcolor =#FFFFFF>
        <&TBODY GT;
            < TR ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                < TD VALIGN =顶ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                    <表格的宽度=100%CELLSPACING =0的cellpadding =0边界=0ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;保证金:0像素;填充:0像素>
                        <&TBODY GT;
                                < TR align =left的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                                    < TD WIDTH =100%>
                                        <表格的宽度=100%CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;的margin-top:0像素!重要;填充顶:0像素重要>
                                            <&TBODY GT;
                                                < TR align =left的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无>
                                                    < TD WIDTH =100%>
                                                        <表格的宽度=100%CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0像素;边界:0像素无;的margin-top:0像素!重要;填充顶:0像素重要>
                                                            <&TBODY GT;
                                                                < TR风格=边界崩溃:崩溃;边框间距:0像素,边框:0;高度:50px​​的>
< TD WIDTH =100%VALIGN =顶HEIGHT =50align =left的风格=背景:#FFFFFF的bgcolor =#FFFFFF>< IMG WIDTH =1HEIGHT = 50的风格=边界:0;显示:块;线高度:1;不透明:0;填充:0像素SRC =htt​​p://mailrox-prod.s3.amazonaws.com/clear.gifALT =>&下; / TD>
                                                                < / TR>
                                                            < / TBODY>
                                                        < /表>
                                                    < / TD>
                                                < / TR>
                                            < / TBODY>
                                        < /表>
                                    < / TD>
                                < / TR>
                            < / TBODY>
                        < /表>
                    < / TD>
                < / TR>
        < / TBODY>
    < /表>
< / DIV>
<表ALIGN =中心的cellpadding =0CELLSPACING =0WIDTH =100%的风格=背景:#FFFFFF;边界崩溃:崩溃;边框间距:0;边框:0;保证金: 0像素0 0;填充:0像素0 0的bgcolor =#FFFFFF>
< TR ALIGN =中心的风格=边界崩溃:崩溃;边框间距:0;边框:0>
                        < TD ALIGN =中心VALIGN =顶的风格=边界崩溃:崩溃;边框间距:0;边框:0>< D​​IV CLASS =MI-一切的风格=显示:块>
    <表类=MI-所有WIDTH =566ALIGN =中心CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;显示:块;保证金:0像素0 0;填充:0像素0>
        <&TBODY GT;
                < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =566HEIGHT =117align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218755/490d09a47432a346ff8b0e78081c0893-original.jpg?1423832407\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =62HEIGHT =208align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:62px;&GT ;            &所述; IMG宽度=62高度=208 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218759/19ddd566053aea03ffa236be1c3c7106-original.jpg?1423832410\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =437align =leftVALIGN =顶>
    <表格的宽度=437ALIGN =中心CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;保证金:0像素0 0;填充:0像素0>
        <&TBODY GT; < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =437HEIGHT =75align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG WIDTH =437HEIGHT =75 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218763/34af46b5e9b769c00b2ecdb0e18fb2f6-original.jpg?1423832414\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =96高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:96PX;&GT ;            &所述; IMG宽度=96高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =52高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:52px;&GT ;            < IMG WIDTH =52高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =83高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:83px;&GT ;            &所述; IMG宽度=83高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =40高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:40像素;&GT ;            &所述; IMG宽度=40高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =42高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:42PX;&GT ;            &所述; IMG宽度=42高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =41高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:41px;&GT ;            &所述; IMG宽度=41高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                            < TD WIDTH =83高度=49align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:83px;&GT ;            &所述; IMG宽度=83高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =437>
            <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =437HEIGHT =84align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            &所述; IMG WIDTH =437HEIGHT =84 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218766/674169b8b96dea256dd794836c855230-original.jpg?1423832416\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
< / TBODY>
    < /表>
< / TD>                            < TD WIDTH =67HEIGHT =208align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;最小宽度:67px;&GT ;            &所述; IMG宽度=67高度=208 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218762/425f7c48b0e4215a8f3109dc03927e76-original.jpg?1423832412\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>
    < TR align =left的风格=边界崩溃:崩溃;边框间距:0;边框:0>
        < TD WIDTH =566>
            <表格的宽度=566CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要>!
                <&TBODY GT;
                    < TR风格=边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD WIDTH =566HEIGHT =185align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:正是>            < IMG src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218758/8eb37cb41486fd5f0528650bea1fe398-original.jpg?1423832409\"风格=边界:0;显示:块;线高度:0像素>< / TD>                    < / TR>
                < / TBODY>
            < /表>
        < / TD>
    < / TR>        < / TBODY>
    < /表>
< / DIV>
                        < / TD>
                    < / TR>
            < /表>  < /身体GT;
< / HTML>


在这里,你的code。与我在实施此变通办法尝试(表只):

 <表格的宽度=437CELLSPACING =0的cellpadding =0BORDER =0的风格=边界崩溃:崩溃;边框间距:0;边框:0;的margin-top:0像素重要;填充顶:0像素重要;最小宽度:437px;>
                <&TBODY GT;
                    < TR风格=显示:块;空白:NOWRAP;边界崩溃:崩溃;边框间距:0;边框:0>
                            < TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=96高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            < IMG WIDTH =52高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=83高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=40高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=42高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=41高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>< TD align =leftVALIGN =顶的风格=线高度:0像素; MSO的行高规则:准确;显示器:inline-block的;>            &所述; IMG宽度=83高度=49 src=\"http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425\"风格=边界:0;显示:块;线高度:0像素,宽度:100%;>< / TD>                    < / TR>
                < / TBODY>
            < /表>

I have an email that works perfectly in all email clients (the Outlooks, iOS, Litmus etc) except the Gmail App on Android.

In that app it has gaps appear in it. This is a screenshot of the issue, this is just a basic proof of concept:

Some HTML is below, the issue happens with nested tables in table cells (td). So this has a set of tables and cells with images inside that are the same size of their cell.

Here is a jsfiddle of the html: http://jsfiddle.net/cntdsp5p/

And here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin-top: 0px !important; padding-top: 0px !important">
<head>
<style type="text/css">
    html, body{ margin-top: 0px !important; padding-top: 0px !important; }
    body{ background-color:#FFFFFF; margin-top: 0px !important; padding-top: 0px !important; font-family:sans-serif; }
    table{ margin-top: 0px !important; padding-top: 0px !important; }
    a img{ color:#000001 !important; }

.wysiwyg-text-align-right{ text-align: right; }
.wysiwyg-text-align-center { text-align: center; }
.wysiwyg-text-align-left{ text-align: left; }
.wysiwyg-text-align-justify{ text-align: justify; }

body{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-family:Arial; font-size:14px; line-height:24px; }

h1{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:36px; line-height:44px; }

h2{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:24px; line-height:32px; }

h3{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:15px; line-height:21px; }

p{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-family:Arial; font-size:14px; line-height:24px; }

a{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#1122CC !important; text-decoration:underline; }




        .mi-all{ display: block; }
        .mi-desktop{ display: block; }

    .mi-mobile{
        display: none;
        font-size: 0; 
        max-height: 0; 
        line-height: 0; 
        padding: 0;
        float: left;
        overflow: hidden;
        mso-hide: all; /* hide elements in Outlook 2007-2013 */
    }


</style>

<style type="text/css" >

    @media only screen and (max-device-width: 480px), screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 630px) {

        /* very important! all except 'all' and this current type get a display:none; */
        .mi-desktop{ display: none !important; }

        /* then show the mobile one */
        .mi-mobile{ 
            display: block !important;
            font-size: 12px !important;
            max-height: none !important;
            line-height: 1.5 !important;
            float: none !important;
            overflow: visible !important;
        }
    }

</style>


   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body style="background: #FFFFFF; color: #000000 !important; font-family: Arial; font-size: 14px; line-height: 24px; margin: 0px 0 0 0px; padding: 0px 0 0; text-shadow: none" bgcolor="#FFFFFF">
<style type="text/css">
body {
margin-top: 0px !important; padding-top: 0px !important;
}
body {
background-color: #FFFFFF; margin-top: 0px !important; padding-top: 0px !important; font-family: sans-serif;
}
body {
text-shadow: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: #000000 !important; font-family: Arial; font-size: 14px; line-height: 24px;
}
</style>
<!-- admin --><div class="mi-desktop" style="display: block">
    <table width="100%" cellspacing="0" cellpadding="0" align="center" style="background: #FFFFFF; border-collapse: collapse; border-spacing: 0px; border: 0px none; margin: 0px; padding: 0px" bgcolor="#FFFFFF">
        <tbody>
            <tr align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                <td valign="top" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                    <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin: 0px; padding: 0px">
                        <tbody>
                                <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                                    <td width="100%">
                                        <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin-top: 0px !important; padding-top: 0px !important">
                                            <tbody>
                                                <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                                                    <td width="100%">
                                                        <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin-top: 0px !important; padding-top: 0px !important">
                                                            <tbody>
                                                                <tr style="border-collapse: collapse; border-spacing: 0px; border: 0; height: 50px">
<td width="100%" valign="top" height="50" align="left" style="background: #FFFFFF" bgcolor="#FFFFFF"><img width="1" height="50" style="border: 0; display: block; line-height: 1; opacity: 0; padding: 0px" src="http://mailrox-prod.s3.amazonaws.com/clear.gif" alt=""></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
        </tbody>
    </table>
</div>
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="background: #FFFFFF; border-collapse: collapse; border-spacing: 0; border: 0; margin: 0px 0 0; padding: 0px 0 0" bgcolor="#FFFFFF">
<tr align="center" style="border-collapse: collapse; border-spacing: 0; border: 0">
                        <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; border: 0">

<div class="mi-all" style="display: block">
    <table class="mi-all" width="566" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; display: block; margin: 0px 0 0; padding: 0px 0 0">
        <tbody>
                <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="566" height="117" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218755/490d09a47432a346ff8b0e78081c0893-original.jpg?1423832407" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="62" height="208" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218759/19ddd566053aea03ffa236be1c3c7106-original.jpg?1423832410" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="437" align="left" valign="top">
    <table width="437" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin: 0px 0 0; padding: 0px 0 0">
        <tbody> <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="437" height="75" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218763/34af46b5e9b769c00b2ecdb0e18fb2f6-original.jpg?1423832414" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="96" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="52" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="83" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="40" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="42" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="41" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px">



</td>

                            <td width="83" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="437" height="84" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218766/674169b8b96dea256dd794836c855230-original.jpg?1423832416" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
    </table>
</td>

                            <td width="67" height="208" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218762/425f7c48b0e4215a8f3109dc03927e76-original.jpg?1423832412" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="566" height="185" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218758/8eb37cb41486fd5f0528650bea1fe398-original.jpg?1423832409" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

        </tbody>
    </table>
</div>


                        </td>
                    </tr>
            </table>



  </body>
</html>

Again this email works perfectly in everything except the Android Gmail app, I'd love to know how to fix it.

Thanks.

解决方案

Giving your tables cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: none;" and your images style="display: block;" is certainly a good start, but sadly the gmail android app does some extra-strange things with image sizes. It relates to how the app attempts to make the e-mail fit on your screen (you may notice differences between portrait and landscape mode).


Solution to horizontal gaps (between cols):

To fix the horizontal gaps you can give your images an inline style of width: 100%; while giving the parent <td> elements min-width:--px;. You may even get away with just the min-width declaration if you put it on the right element.


Solution to vertical gaps (between rows):

This will then leave you with two vertical gaps, one of which is easily taken care of by giving all of your images their width and height attributes. Always make sure to give all fixed-size images an explicit width and height.

The second vertical gap is harder to deal with. This one 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. At the moment I do not have a solution to this type of gap... I will post here if I find or come up with one.

Edit:

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. 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.

  1. Give all <tr>s an inline style of display: block; white-space: nowrap;.
  2. Give all <td>s an inline style of display: inline-block;.
  3. Remove any width or height declarations from your <td>s including the min-width style that we added to fix the horizontal gaps (should no longer be necessary).
  4. Remove any whitespace between your <td>s.
  5. 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 first modifications (one vertical gap, no workaround):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin-top: 0px !important; padding-top: 0px !important">
<head>
<style type="text/css">
    html, body{ margin-top: 0px !important; padding-top: 0px !important; }
    body{ background-color:#FFFFFF; margin-top: 0px !important; padding-top: 0px !important; font-family:sans-serif; }
    table{ margin-top: 0px !important; padding-top: 0px !important; }
    a img{ color:#000001 !important; }

.wysiwyg-text-align-right{ text-align: right; }
.wysiwyg-text-align-center { text-align: center; }
.wysiwyg-text-align-left{ text-align: left; }
.wysiwyg-text-align-justify{ text-align: justify; }

body{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-family:Arial; font-size:14px; line-height:24px; }

h1{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:36px; line-height:44px; }

h2{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:24px; line-height:32px; }

h3{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-weight:400; font-family:Arial; font-size:15px; line-height:21px; }

p{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#000000 !important; font-family:Arial; font-size:14px; line-height:24px; }

a{ text-shadow:none; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; color:#1122CC !important; text-decoration:underline; }




        .mi-all{ display: block; }
        .mi-desktop{ display: block; }

    .mi-mobile{
        display: none;
        font-size: 0; 
        max-height: 0; 
        line-height: 0; 
        padding: 0;
        float: left;
        overflow: hidden;
        mso-hide: all; /* hide elements in Outlook 2007-2013 */
    }


</style>

<style type="text/css" >

    @media only screen and (max-device-width: 480px), screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 630px) {

        /* very important! all except 'all' and this current type get a display:none; */
        .mi-desktop{ display: none !important; }

        /* then show the mobile one */
        .mi-mobile{ 
            display: block !important;
            font-size: 12px !important;
            max-height: none !important;
            line-height: 1.5 !important;
            float: none !important;
            overflow: visible !important;
        }
    }

</style>


   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body style="background: #FFFFFF; color: #000000 !important; font-family: Arial; font-size: 14px; line-height: 24px; margin: 0px 0 0 0px; padding: 0px 0 0; text-shadow: none" bgcolor="#FFFFFF">
<style type="text/css">
body {
margin-top: 0px !important; padding-top: 0px !important;
}
body {
background-color: #FFFFFF; margin-top: 0px !important; padding-top: 0px !important; font-family: sans-serif;
}
body {
text-shadow: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: #000000 !important; font-family: Arial; font-size: 14px; line-height: 24px;
}
</style>
<!-- admin --><div class="mi-desktop" style="display: block">
    <table width="100%" cellspacing="0" cellpadding="0" align="center" style="background: #FFFFFF; border-collapse: collapse; border-spacing: 0px; border: 0px none; margin: 0px; padding: 0px" bgcolor="#FFFFFF">
        <tbody>
            <tr align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                <td valign="top" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                    <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin: 0px; padding: 0px">
                        <tbody>
                                <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                                    <td width="100%">
                                        <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin-top: 0px !important; padding-top: 0px !important">
                                            <tbody>
                                                <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none">
                                                    <td width="100%">
                                                        <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; border: 0px none; margin-top: 0px !important; padding-top: 0px !important">
                                                            <tbody>
                                                                <tr style="border-collapse: collapse; border-spacing: 0px; border: 0; height: 50px">
<td width="100%" valign="top" height="50" align="left" style="background: #FFFFFF" bgcolor="#FFFFFF"><img width="1" height="50" style="border: 0; display: block; line-height: 1; opacity: 0; padding: 0px" src="http://mailrox-prod.s3.amazonaws.com/clear.gif" alt=""></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
        </tbody>
    </table>
</div>
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="background: #FFFFFF; border-collapse: collapse; border-spacing: 0; border: 0; margin: 0px 0 0; padding: 0px 0 0" bgcolor="#FFFFFF">
<tr align="center" style="border-collapse: collapse; border-spacing: 0; border: 0">
                        <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; border: 0">

<div class="mi-all" style="display: block">
    <table class="mi-all" width="566" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; display: block; margin: 0px 0 0; padding: 0px 0 0">
        <tbody>
                <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="566" height="117" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218755/490d09a47432a346ff8b0e78081c0893-original.jpg?1423832407" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="62" height="208" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width:62px;">



            <img width="62" height="208" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218759/19ddd566053aea03ffa236be1c3c7106-original.jpg?1423832410" style="border: 0; display: block; line-height: 0px;width:100%;">



</td>

                            <td width="437" align="left" valign="top">
    <table width="437" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin: 0px 0 0; padding: 0px 0 0">
        <tbody> <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="437" height="75" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img width="437" height="75" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218763/34af46b5e9b769c00b2ecdb0e18fb2f6-original.jpg?1423832414" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="96" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 96px;">



            <img width="96" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="52" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 52px;">



            <img width="52" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="83" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 83px;">



            <img width="83" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="40" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 40px;">



            <img width="40" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="42" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 42px;">



            <img width="42" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="41" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 41px;">



            <img width="41" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                            <td width="83" height="49" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 83px;">



            <img width="83" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="437">
            <table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="437" height="84" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img width="437" height="84" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218766/674169b8b96dea256dd794836c855230-original.jpg?1423832416" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
    </table>
</td>

                            <td width="67" height="208" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;min-width: 67px;">



            <img width="67" height="208" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218762/425f7c48b0e4215a8f3109dc03927e76-original.jpg?1423832412" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0">
        <td width="566">
            <table width="566" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important">
                <tbody>
                    <tr style="border-collapse: collapse; border-spacing: 0; border: 0">
                            <td width="566" height="185" align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly">



            <img src="http://mailrox2-dev.s3.amazonaws.com/crops/3218758/8eb37cb41486fd5f0528650bea1fe398-original.jpg?1423832409" style="border: 0; display: block; line-height: 0px">



</td>

                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

        </tbody>
    </table>
</div>


                        </td>
                    </tr>
            </table>



  </body>
</html>


And here your code with my attempt at implementing the workaround (table only):

<table width="437" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: 0; margin-top: 0px !important; padding-top: 0px !important; min-width: 437px;">
                <tbody>
                    <tr style="display: block; white-space: nowrap; border-collapse: collapse; border-spacing: 0; border: 0">
                            <td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="96" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="52" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="83" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="40" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="42" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="41" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td><td align="left" valign="top" style="line-height: 0px; mso-line-height-rule: exactly;display: inline-block;">



            <img width="83" height="49" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425" style="border: 0; display: block; line-height: 0px; width: 100%;">



</td>

                    </tr>
                </tbody>
            </table>

这篇关于出现在电子邮件中只有Android版Gmail的差距。我该如何解决这个问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆