1

我一直在尝试创建一个 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>

任何煽动为什么这种情况仍在发生的人将不胜感激。

4

3 回答 3

2

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

希望这可以帮助。

于 2011-04-06T22:00:06.213 回答
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 中减去一个。

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 默认禁用图像。由于除了图像之外没有其他内容，所有用户最初都看不到任何内容，直到他们采取行动……不好。许多人永远不会费心点击链接，从而使您的电子邮件对那部分观众无效。文字并不性感……但您几乎可以保证您的观众会看到它。祝你好运。

于 2010-07-23T01:20:21.793 回答
0

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

试试这个：

<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>
于 2013-03-15T10:33:00.220 回答