HTML-письмо со связанными изображениями разрывается в Outlook - PullRequest
2 голосов
/ 03 февраля 2012

Я создал простое 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 ]

1 голос
/ 06 февраля 2012

Это могут быть Div, которые вызывают проблему.Outlook обрабатывает DIV не так, как браузер, и обычно дает им двойной интервал между строками.Попробуйте вместо этого использовать SPAN.

0 голосов
/ 03 февраля 2012

Это немного догадка, потому что у меня нет 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;">
...