Gmail 中添加的空白，位于 Outlook 的 html 签名中答案

【问题标题】：A gap added in Gmail, inside a html signature from outlookGmail 中添加的空白，位于 Outlook 的 html 签名中
【发布时间】：2011-07-12 01:01:07
【问题描述】：

我创建了一个需要在 Outlook 中使用的 html 签名。根据建议，我使用了表格布局，给定所有图像甚至 td、tr 和表格本身的特定高度和宽度，0 填充和边距，甚至尝试在 css 和老式方式中添加它们实际标签。
在 Outlook 中，它是正确的，但在 gmail 中它增加了 tr 之间的差距。按照这里的建议：Gmail displaying gaps between images，我尝试添加 style="display:block;"对于图像，仍然没有运气。这是我使用的代码：

<table cellspacing="0px" cellpadding="0px" border="0px" width="592px" height="254px" style="border-collapse:collapse; border:none; padding:0px; margin:0px; width:592px; height:254px;">
<tr cellspacing="0px" cellpadding="0px" width="592px" height="90px" style="padding:0px; margin:0px; width:592px; height:90px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="90px" style="padding:0px; margin:0px; width:83px; height:90px;">&nbsp;</td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="90px" style="padding:0px; margin:0px; width:150px; height:90px;"><img src="new_sig.files/sig2.png" width="150px" height="90px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="90px" style="padding:0px; margin:0px; width:359px; height:90px;"><img src="new_sig.files/sig3.png" width="359px" height="90px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="64px" style="padding:0px; margin:0px; width:592px; height:64px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="64px" style="padding:0px; margin:0px; width:83px; height:64px;"><a href="http://www.facebook.com"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></a></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="64px" style="padding:0px; margin:0px; width:150px; height:64px;"><img src="new_sig.files/sig5.png" width="150px" height="64px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="64px" style="padding:0px; margin:0px; width:359px; height:64px;"><img src="new_sig.files/sig6.png" width="359px" height="64px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="100px" style="padding:0px; margin:0px; width:592px; height:100px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="100px" style="padding:0px; margin:0px; width:83px; height:100px;"><img src="new_sig.files/sig7.png" width="83px" height="100px"></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="100px" style="padding:0px; margin:0px; width:150px; height:100px;"><img src="new_sig.files/sig8.png" width="150px" height="100px"></td>
<td cellspacing="0px" style="padding:0px 5px 0px 15px; margin:0px; width:339px; height:100px;line-height:16px; font-size:12px;color:#4f4f4f;font-family:arial;" >
Name LastName<br/>
Description<br/><br/>
<a href="http://www.site.com" style="color:#0875a4;">www.site.com</a>
<img src="new_sig.files/phone_icon.png" width="18px" height="28px"/>
972-(0)3-6960556
<img src="new_sig.files/mail_icon.png" width="18px" height="28px"/>
<a href="mailto:name@site.com" style="color:#0875a4;">name@site.com</a>
</td>
</tr>
</table>

现在，gmail 读取的代码显然是这样的：

<table width="592" cellspacing="0" cellpadding="0" border="0" style="width: 444pt; border-collapse: collapse;">
<tbody>
<tr style="min-height: 67.5pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">&nbsp;</span></p>
</td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr>
<tr style="min-height: 48pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 48pt;">
<p class="MsoNormal"><a target="_blank" href="http://www.facebook.com/"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td><td width="150" style="width: 112.5pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr>
<tr style="min-height: 75pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="339" style="width: 254.25pt; padding: 0in 3.75pt 0in 11.25pt; min-height: 75pt;">
<p style="line-height: 12pt;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(79, 79, 79);">Name LastName<br>Description<br><br><a target="_blank" href="http://www.site.com">
<span style="color: rgb(8, 117, 164);">www.site.com</span></a> </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">972-(0)3-6960556 </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<a target="_blank" href="mailto:name@site.com">
<span style="color: rgb(8, 117, 164);">name@site.com</span></a> </span></p></td></tr>
</tbody></table>

我也尝试将整个表格的行高设为 0，但这也不起作用。
最后一个单元格中的 2 张图片，顺便说一句，由于某种原因没有在 gmail 中显示。

更新：直到现在才真正注意到这收到了更多答案。我们最终简化了设计/代码，过了一会儿我停止检查这个页面。不确定这里的任何解决方案是否有效，但我看到他们帮助了其他人。 thnx 反正:)

【问题讨论】：

标签： html outlook gmail signature

【解决方案1】：

对我有用的解决方案是我总结了这里给出的每一个解决方案

做了类似的事情：

        <td rowspan="2" style="line-height:0">
<img src="images/myimage.jpg" width="426" height="183" alt=""border="0" style="display:block;" />
</td>

它对我来说很好......

【讨论】：

【解决方案2】：

您提到您尝试将 style="display:block" 添加到您的图像，但我没有在您的代码中看到这一点。在 Gmail 中，有几件事为我解决了这些情况：

将border="0" 和style="display:block" 添加到每个元素中
在属性中（而不是在“style”属性中）指定宽度和高度时，不包括“px”，只包括数字

因此，如果您确保所有图像都采用以下格式，则应该消除这些间隙（假设它们不是由不正确的高度值放在那里的）。

<img alt="something" src="http://somewhere.com/image.png" width="35" height="35" border="0" style="display:block;" />

【讨论】：

【解决方案3】：

对于仅包含图像的表格单元格，将 line-height 设置为 0

<td style="line-height:0"><img ... /></td>

（关于酸的电子邮件是一个很好的提示。）

【讨论】：

谢谢！对我来说是救命稻草。非常感谢。
@Tim，对于包含文本的表格单元格？有什么建议？谢谢。

【解决方案4】：

试着把它放在头上：

<style type="text/css">
    <!--
        p.MsoNormal {
            margin: 0px !important;
        }
    -->
</style>

它应该覆盖 Gmail 中不愿意出现的样式。

【讨论】：

【解决方案5】：

好吧，我无法通过向我的 Gmail 帐户发送电子邮件来重现问题，但我在 Opera 浏览器中检查 HTML 时确实发现了问题。

尝试将vertical-align: middle; 添加到有问题的<TD>。它为 Opera 成功了。

也就是说，当然，看不到图像，但垂直对齐不应该妨碍任何事情。

您可能还想查看此工具： http://www.emailonacid.com/

免费版允许您查看 AOL Web、Gmail 和 Outlook 2003。

【讨论】：

它确实解决了萤火虫中的问题，但是当我通过 Outlook 再次发送它时，由于某种原因它删除了垂直对齐。我刚刚尝试添加 valign td，它也删除了它..