尝试消除 HTML 电子邮件中的水平和垂直空格。
我一直在尝试创建一封 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&hl=en&q=Winstons+Billiards+Cafe&sll=39.005045,-77.067375&sspn=0.259055,0.458336&ie=UTF8&cd=1&hq=Winstons+Billiards+Cafe&hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&geocode=FQBAVAIdGuhm-w&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>
任何关于为什么这种情况仍然发生的煽动都将不胜感激。
I have been trying to create a HTML E-mail, which is just one image that I sliced up using Fireworks CS4.
When looking at it in IE, Opera, and Firefox the actual image looks fine. However as soon as I import it into Microsoft Outlook 2007, I end up with a horizontal white spaces below the top image (WinstonsAd_r1_c1), and a vertical space between the bottom two images (WinstonsAd_r2_c1 and WinstonsAd_r2_c2 respectively).
I have cellpadding="0" cellspacing="0" border="0" and td img {display: block;}. I tried removing all spaces between the , and from the code.
For right now I haven't uploaded the code or images to a web server, mainly due to the fact that the person I am doing this for has not purchased one yet.
<!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&hl=en&q=Winstons+Billiards+Cafe&sll=39.005045,-77.067375&sspn=0.259055,0.458336&ie=UTF8&cd=1&hq=Winstons+Billiards+Cafe&hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&geocode=FQBAVAIdGuhm-w&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>
Any incite to why this is still happening would be much appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在代码视图中，将光标插入
border="0"后，然后在style="display: block;"中输入类型对每个图像/切片执行此操作。
希望这有帮助。
While in code view, insert cursor after
border="0"and type in type instyle="display: block;"Do this for each image/slice.
Hope this helps.
我看到这里发生了一些事情：
酸性测试报告表明您的列加起来不等于总宽度。这可能不是问题的全部，但可能是问题的一部分。调整表格的整体宽度或从 td 中减去 1。
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
从用户界面的角度来看，您的页面相当宽......我认识的大多数人都在运行 Outlook 时打开了几个“窗格”，这将导致它过大...Hotmail 上也是如此，从而导致错误对话框。考虑将尺寸减小到 800 甚至更低。我因工作需要发送大量电子邮件，但数量从来不会超过 750 封。最后，Outlook 和 Gmail 默认禁用图像。由于除了图像之外没有任何内容，所有用户最初都不会看到任何内容，直到他们采取行动......这不好。许多人永远不会费心点击该链接，从而使您的电子邮件对这部分受众无效。文字并不性感……但几乎可以保证您的观众会看到它。祝你好运。
I see a couple of things going on here:
Acid test reports that your columns don't add up to total width. This may not be the entire problem, but it could be part of the problem. Either adjust your table overall width or subtract one from a td.
Outlook 07/10 doesn't support display:block formatting on your image. Also, spacer.gif is a relative link that will break when you send. Here's a great resource for knowing which CSS elements work (or don't, on Outlook) http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf
From a UI standpoint, your page is pretty wide...most people I know run outlook with several "panes" on and this will cause it to oversize...ditto on Hotmail, causing an error dialog. Consider dropping your size down to 800 or even lower. I send out a lot of emails for work and we never go bigger than 750. Finally, outlook and Gmail disable images by default. Since there's no content there besides images, all users will initially see nothing until they take action...not good. Many will never bother to click the link, making your email ineffective to that portion of the audience. Text ain't sexy...but you are virtually guaranteed that your audience will see it. Good luck.
使用“tbody”标签并将行高设置为 0。
试试这个：
Use "tbody" tag with line-height set to 0.
Try this: