仅在Android Gmail中的电子邮件中出现差距。我该如何解决这个问题？
[英]Gaps appearing in an email in only Android Gmail. How do I fix this issue?
问题描述
I have an email that works perfectly in all email clients (the Outlooks, iOS, Litmus etc) except the Gmail App on Android. 
我有一封电子邮件，除了Android上的Gmail应用程序外，在所有电子邮件客户端（Outlook，iOS，Litmus等）中都能正常运行。
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). 下面是一些HTML，问题出现在表格单元格（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/ 这是html的jsfiddle： http ： //jsfiddle.net/cntdsp5p/
And here is the html: 这是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. 再次，这封电子邮件在除Android Gmail应用程序之外的所有内容中都能完美运行，我很想知道如何修复它。
Thanks. 谢谢。
3 个解决方案
解决方案1
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;" 给你的表cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; border: none;" and your images style="display: block;" 和你的图片style="display: block;" is certainly a good start, but sadly the gmail android app does some extra-strange things with image sizes. 肯定是一个好的开始，但遗憾的是gmail安卓应用程序使用图像大小做了一些奇怪的事情。 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%; 要修复水平间隙，您可以为图像提供width: 100%;为内嵌的样式width: 100%; while giving the parent <td> elements min-width:--px; 同时给父<td>元素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. 也许你会有更好的运气，但你可能不得不改变你的HTML结构才能运作。 To sum up the workaround: 总结一下解决方法：
Restating the problem - Gmail app rounds up when resizing tables, and down when resizing images.
- Give all
<tr>s an inline style ofdisplay: block; white-space: nowrap;给所有<tr>一个内联样式display: block; white-space: nowrap;display: block; white-space: nowrap;.。 - Give all
<td>s an inline style ofdisplay: inline-block;给所有<td>一个内联样式display: inline-block;.。 - Remove any width or height declarations from your
<td>s including themin-widthstyle that we added to fix the horizontal gaps (should no longer be necessary).从<td>删除任何宽度或高度声明，包括我们为修复水平间隙而添加的min-width样式（不再需要）。 - Remove any whitespace between your
<td>s.删除<td>之间的任何空格。 - Ensure that your container table has a
min-width.确保容器表具有min-width。
Campaign Monitor's CSS Guide may also be of use to you while troubleshooting this issue. 在解决此问题时， Campaign Monitor的CSS指南也可能对您有用。
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>
解决方案2
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. 我重新创建了你的HTML（ https://jsfiddle.net/edu8rdo/bp5kmgbp/ ）并在其上运行了一个Litmus测试，看不到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>
解决方案3
-1 2016-11-30 15:30:49
在你的桌子上设置这个
<table ..... style="font-size : 0px">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何修复 Flutter for Android 问题？ - How do I fix a Flutter for Android issue?
如何修复仅显示单行的android的回收视图视图问题 - How do I fix android's recycler view rendering issue which only displays single rows
如何解决 Android Studio 中重叠组件的问题？ - How do I fix issue on overlapping components in Android Studio?
如何解决Android Studio中的HAX Carnel模块问题？ - How do I fix HAX carnel module issue in Android studio?
Android Studio：如何解决我的 AVD 终止问题？ - Android Studio: How do I fix my AVD termination issue?
在 flutter 中使用 Snack Bar 和 Navigator 时，如何修复“不要使用 BuildContexts accros async gaps” - How do I fix "Do not use BuildContexts accros async gaps" when using Snack Bar and Navigator in flutter
如何检测到我在Android设备上收到了电子邮件/ gmail？ - How to detect that i have received an email/gmail on my Android Device?
如何修复此AuthStateListener问题 - How do I fix this AuthStateListener issue
如何解决此清单合并问题？ - How Do I Fix This Manifest Merger Issue?
如何从gmail android接收电子邮件 - How to receive email from gmail android
相关标签