带有链接图像的HTML电子邮件在Outlook中中断

时间：2012-02-03 14:00:23

标签： html email outlook email-client

我创建了一个简单的html电子邮件，其中的图像包含以下代码：

<html>
<head>
</head>
<body style="background-color:#FFFFFF">
<div style="width: 720px; margin: 0pt auto; overflow:hidden; font-size:0; line-height:0;">
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0401_3.jpg" height="176" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0402_3.jpg" height="50" border="0" width="478"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline; border:0;" src="http://img.emailnewsletter-software.net/n869_likeButton1_3.jpg" height="50" border="0" width="165"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0404_3.jpg" height="50" border="0" width="77"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0405_3.jpg" height="238" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0406_3.jpg" height="13" border="0" width="272"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline; border:0;" src="http://img.emailnewsletter-software.net/n869_siteLink1_3.jpg" height="13" border="0" width="176"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0408_3.jpg" height="13" border="0" width="272"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0409_3.jpg" height="112" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0410_3.jpg" height="27" border="0" width="503"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton2_3.jpg" height="27" border="0" width="52"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0412_3.jpg" height="27" border="0" width="165"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0413_3.jpg" height="133" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0414_3.jpg" height="27" border="0" width="503"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton3_3.jpg" height="27" border="0" width="52"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0416_3.jpg" height="27" border="0" width="165"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0417_3.jpg" height="131" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0418_3.jpg" height="17" border="0" width="356"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_siteLink2_3.jpg" height="17" border="0" width="162"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0420_3.jpg" height="17" border="0" width="202"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0421_3.jpg" height="36" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0422_3.jpg" height="48" border="0" width="282"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton4_3.jpg" height="48" border="0" width="157"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0424_3.jpg" height="48" border="0" width="281"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0425_3.jpg" height="55" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0426_3.jpg" height="15" border="0" width="256"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline;" src="http://img.emailnewsletter-software.net/n869_siteLink3_3.jpg" height="15" border="0" width="159"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0428_3.jpg" height="15" border="0" width="305"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0429_3.jpg" height="42" border="0" width="720"></div>
</div>
</body>
</html>

这在我测试过的所有电子邮件客户端中都能正常显示但是Outlook！所有链接的图像都显示出周围不规则的空白，如下图所示。

enter image description here

请帮助！

2 个答案:

答案 0 :(得分：1)

可能是导致问题的Div。 Outlook以不同于浏览器的方式处理DIV，通常为它们提供双行间距。请尝试使用SPAN。

答案 1 :(得分：0)

这是一个猜测，因为我没有Outlook运行测试，但尝试在链接本身没有设置边框：

<a href="http://www.antwerpjewels.co.uk" target="_blank" style="border: none;">

或者失败了，试试：

<a href="http://www.antwerpjewels.co.uk" target="_blank" style="text-decoration: none;">
相关问题
最新问题