我的HTML电子邮件在header.png和body.png图片之间有额外的空白区域(实际上是他们的表格行)。我不能为我的生活弄清楚为什么会这样。它只发生在适用于Android的Gmail上,而不适用于适用于Iphone的Gmail。这是代码:
<body topmargin="0">
<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0; border: none; border: 1px solid #b76f49">
<tr>
<td width="600" style="display:block !important;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="600" style="line-height:0;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;line-height:0;font-size:1px;">
<tr>
<td width="17" style="line-height:0;min-width:17px;">
<img src="headerleft.png" width="17" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
<td width="567" style="line-height:0;min-width:567px;">
<img alt="" border="0" width="567" src="header.png" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
<td width="16" style="line-height:0;min-width:16px;">
<img src="headerright.png" width="16" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" style="display:block !important;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="17" style="border-right:3px solid #b76f49; min-width:17px; font-size:1px;">
<img src="bodyleft.png" width="17" border="0" style="display:block !important; line-height:0; font-size:1px;">
</td>
<td width="561">
<table cellpadding="0" cellspacing="0" width="561" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="20" style="font-size:1px;">
</td>
<td width="357" valign="top" style="font-family: Arial; font-size: 14px; font-color: #000;">
<p style="font-family:Arial; font-size: 16px; font-weight: bold; color:#004685;">HEader</p>
Hello,<br><br>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</td>
<td width="184" style="min-width:184px;">
<img src="bodyrightimage.png" width="170" height="400" border="0" align="right" style="font-size: 1px; line-height:0px; display:block!important;">
</td>
</tr>
</table>
</td>
<td width="30" style="border-left:3px solid #b76f49;min-width:30px;">
<img src="bodyright.png" height="400" width="16" border="0" style="display:block !important; line-height:0; font-size: 1px;">
</td>
</tr>
</table>
</td>
</tr>
答案 0 :(得分:0)
HTML将换行符计为空格,因此如果您使用表格单元格(ick)进行布局,则此代码为:
<tr>
<td>
<img ... />
^---line break here
</td>
^^^---indentation whitespace here
<td>
<img ... />
</d>
</tr>
将呈现为
[img] [img]
^----linebreak+indentation as whitespace
简单的解决方案:不要将</td>
放在单独的一行:
<tr>
<td><img ../></td>
<td><img ../></td>
</tr>