试图摆脱 HTML 电子邮件中的水平和垂直空白。答案

【问题标题】：Trying to get rid of horizontal and vertical white spaces in HTML E-Mail.试图摆脱 HTML 电子邮件中的水平和垂直空白。
【发布时间】：2010-07-23 00:35:06
【问题描述】：

我一直在尝试创建一个 HTML 电子邮件，这只是我使用 Fireworks CS4 切割的一张图像。在 IE、Opera 和 Firefox 中查看它时，实际图像看起来不错。然而，当我将它导入 Microsoft Outlook 2007 时，我最终会在顶部图像 (WinstonsAd_r1_c1) 下方出现水平空白，而底部两个图像之间会出现垂直空白（分别为 WinstonsAd_r2_c1 和 WinstonsAd_r2_c2）。

我有 cellpadding="0" cellspacing="0" border="0" 和 td img {display: block;}。我尝试从代码中删除 , 和之间的所有空格。

目前我还没有将代码或图像上传到网络服务器，主要是因为我为之做这件事的人还没有购买。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!-- saved from url=(0014)about:internet -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>WinstonsAd.gif</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--Fireworks CS3 Dreamweaver CS3 target.  Created Thu Jul 22 17:06:09 GMT-0400 (Eastern Daylight Time) 2010-->
</head>
<body bgcolor="#ffffff">
<style type="text/css">td img {display: block;}</style>
<table border="0" cellpadding="0" cellspacing="0" width="1023">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="WinstonsAd.gif" fwstyle="Dreamweaver" fwdocid = "35095674" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="http://www.google.com/maps?source=s_q&amp;hl=en&amp;q=Winstons+Billiards+Cafe&amp;sll=39.005045,-77.067375&amp;sspn=0.259055,0.458336&amp;ie=UTF8&amp;cd=1&amp;hq=Winstons+Billiards+Cafe&amp;hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&amp;geocode=FQBAVAIdGuhm-w&amp;ll=39.057"><img name="WinstonsAd_r2_c1" src="WinstonsAd_r2_c1.gif" width="646" height="35" border="0" id="WinstonsAd_r2_c1" alt="Google Map To Winston's" /></a></td>
<td><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r2_c2" src="WinstonsAd_r2_c2.gif" width="377" height="35" border="0" id="WinstonsAd_r2_c2" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="35" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>

任何煽动为什么这仍然会发生将不胜感激。

【问题讨论】：

标签： html html-email

【解决方案1】：

在代码视图中，在border="0" 之后插入光标并在style="display: block;" 中输入类型对每个图像/切片执行此操作。

希望这会有所帮助。

【讨论】：

【解决方案2】：

我看到这里发生了一些事情：

<tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>

Acid 测试报告您的列不等于总宽度。这可能不是问题的全部，但可能是问题的一部分。调整表格的整体宽度或从 td 中减去一个。

Outlook 07/10 不支持图像上的显示：块格式。此外，spacer.gif 是一个相对链接，在您发送时会中断。这是一个很好的资源，可以帮助您了解哪些 CSS 元素在 Outlook 上有效（或无效）http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf

从 UI 的角度来看，您的页面非常宽...我认识的大多数人在运行 Outlook 时都会打开几个“窗格”，这会导致它过大...在 Hotmail 上也是如此，从而导致错误对话框。考虑将尺寸降低到 800 甚至更低。我为工作发送了很多电子邮件，但我们从来没有超过 750 封。最后，outlook 和 Gmail 默认禁用图像。由于除了图像之外没有其他内容，所有用户最初都看不到任何内容，直到他们采取行动……不好。许多人永远不会费心点击链接，从而使您的电子邮件对那部分观众无效。文字并不性感……但您几乎可以保证您的观众会看到它。祝你好运。

【讨论】：

您好 bpeterson76 感谢您的回复，在阅读了您从不发送大于 750 像素的电子邮件后，我将整个事情缩小到这一点，它摆脱了我遇到的奇怪空间。我删除了 spacer.gif 和 display:block，显然它仍然“有效”。我理解你关于图像的观点，出于某种奇怪的原因，我的朋友希望它只是一张大图像。 拍前额 希望我能说服他这是一个非常非常糟糕的主意。非常感谢你的帮助，我欠你很多啤酒。
这里有一个简单的方法可以向不从事该行业的人说明您的挑战：在此处获取 Firefox Web 开发人员工具栏：chrispederick.com/work/web-developer 获得它后，加载您的电子邮件并关闭图像。瞧，你刚刚说明了你的挑战。电子邮件无法处理 Leahy/Langridge 图像替换，这太糟糕了，因为这将一举解决您的所有问题。

【解决方案3】：

使用“tbody”标签，行高设置为 0。

试试这个：

<table style="border: none;" border="0" cellspacing="0" cellpadding="0">
<tbody style="line-height: 0px;">
<tr>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
</tr>
<tr>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
</tr>
</tbody>
</table>

【讨论】：