stackoom
  简体   繁体   中英

Gaps appearing in an email in only Android Gmail. How do I fix this issue?

 原文  2015-02-13 14:47:27  6   3    android/ html/ email/ gmail/ html-email

Question

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.

3 answers

solution1
 5  2015-02-21 04:04:31

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

solution2
 1  2015-02-13 15:39:45

I could not identify the exact issue, but reviewing the code, there's a lot of declarations not needed and/or doing double work. I think that there may be some contradictions there. I've re-created your HTML ( https://jsfiddle.net/edu8rdo/bp5kmgbp/ ) and ran a Litmus test on it, seeing no gaps in the Gmail. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charSet=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title></title>
        <style type="text/css">
            .ReadMsgBody{ width: 100%;}
            #outlook a { padding:0; }
            body{ width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } 
            .ExternalClass { width:100%;}
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
            #backgroundTable { margin:0; padding:0; width:100% !important; line-height: 100% !important;}

            img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } 
            a img { border:none; } 

            p { margin: 1em 0; }

            h1, h2, h3, h4, h5, h6 { color: black !important; }
            h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }

            table td { border-collapse: collapse; }
            table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

            @-ms-viewport{
                width: device-width;
            }

            @media only screen and (max-width: 480px) {
            html,body {
                width: 100%;
                overflow-x: hidden; 
            }
            body[yahoo] .container {
                width:100% !important;
            }
            body[yahoo] .mobile_image {
                width:100% !important;
                height:auto !important;
            }
            body[yahoo] .drop {
                width:100% !important;
                display:block !important;
            }
            body[yahoo] .hide_this {
                display:none !important;
            }
        }
        </style>
        <!--[if gte mso 9]>
            <style>
                /* Target Outlook 2007 and 2010 */
            </style>
        <![endif]-->
    </head>
    <body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
    <!--Email_start-->
    <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
        <tr>
            <td align="left" valign="top">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td align="center" valign="top">
                            <table cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td align="left" valign="top">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td align="left" valign="top">
                                                    <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218755/490d09a47432a346ff8b0e78081c0893-original.jpg?1423832407" width="566" height="177" border="0" style="display: block;">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td align="left" valign="top">
                                                    <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218759/19ddd566053aea03ffa236be1c3c7106-original.jpg?1423832410" width="62" height="208" border="0" style="display: block;">
                                                </td>
                                                <td align="left" valign="top">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                        <tr>
                                                            <td align="left" valign="top">
                                                                <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218763/34af46b5e9b769c00b2ecdb0e18fb2f6-original.jpg?1423832414" width="437" height="75" border="0" style="display: block;">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" valign="top">
                                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                                    <tr>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218767/bd9eaee611c770ba4e1cf622dc3a8c2d-original.jpg?1423832418" width="96" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218769/45fec80922c3f48137c596c3ff749dfb-original.jpg?1423832419" width="52" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218771/b47339b9fc571427b652bddc8ff27308-original.jpg?1423832420" width="83" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218773/82abd90c62a69a367df080c998d95921-original.jpg?1423832422" width="40" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218775/bdc152f96b37a54241d4148d49370f3b-original.jpg?1423832423" width="42" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218777/6c5cecb72d86a5fd28304bc2d3c2251d-original.jpg?1423832425" width="41" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218778/1765f64e482ae6f647ac92dca014d991-original.jpg?1423832425" width="83" height="49" border="0" style="display: block;">
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" valign="top">
                                                                <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218766/674169b8b96dea256dd794836c855230-original.jpg?1423832416" width="437" height="84" border="0" style="display: block;">
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td align="left" valign="top">
                                                    <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218762/425f7c48b0e4215a8f3109dc03927e76-original.jpg?1423832412" width="67" height="208" border="0" style="display: block;">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top">
                                        <img alt="" src="http://mailrox2-dev.s3.amazonaws.com/crops/3218758/8eb37cb41486fd5f0528650bea1fe398-original.jpg?1423832409" width="566" height="185" border="0" style="display: block;">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>  
    <!--Email_end-->
    </body>
    </html>

solution3
 -1  2016-11-30 15:30:49

在你的桌子上设置这个

<table ..... style="font-size : 0px">

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I fix a Flutter for Android issue? How do I fix android's recycler view rendering issue which only displays single rows How do I fix issue on overlapping components in Android Studio? How do I fix HAX carnel module issue in Android studio? Android Studio: How do I fix my AVD termination issue? How do I fix "Do not use BuildContexts accros async gaps" when using Snack Bar and Navigator in flutter How to detect that i have received an email/gmail on my Android Device? How do I fix this AuthStateListener issue How Do I Fix This Manifest Merger Issue? How to receive email from gmail android
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM