Проблемы с электронной почтой в формате HTML - PullRequest
Новая
       13

Проблемы с электронной почтой в формате HTML

1 голос
/ 18 декабря 2011

Мне не приходилось отправлять почтовые рассылки в течение ряда лет, и я помню, что процесс был очень болезненным.

Я разделил свой дизайн на три части и поместил их в таблицу. Таблица имеет заданную высоту и ширину, как и все отдельные элементы, однако при просмотре в почтовом клиенте, таком как Gmail, между тремя пробелами есть пробелы. строки таблицы.

Мой HTML. Я думаю, вы согласитесь, что это не может быть упрощено! 

<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
 <tr>
  <td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
 </tr><tr>
  <td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
  <td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
 </tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<a href="TBA"><img src="images/OC_04.gif" alt="" width="550" height="105"></a></td>
 </tr>
</table>

Есть ли здесь сегодня кто-нибудь, у кого достаточно опыта работы с электронной почтой, чтобы указать мне правильное направление?

Изменить, чтобы добавить: я разбирал некоторые коммерческие электронные письма, которые были отправлены мне в прошлом, и я обнаружил, что у некоторых из них также есть эта странная проблема с пробелами в Gmail. Я также заметил, что каждый из них был спроектирован таким образом, чтобы учесть любое дополнительное расстояние между строками, поэтому я собираюсь предположить, что ответ на этот вопрос заключается в том, чтобы гарантировать, что дизайн выполнен таким образом, что эти пробелы не проблема.

Ответы [ 3 ]

2 голосов
/ 12 июня 2012

Вы должны включить style = "display: block" со всеми изображениями, чтобы избежать проблем с пропусками в различных почтовых клиентах.

Пример: 

<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty" 
 width="1000" height="1000" 
 style="border:none; margin:0px; padding:0px; **display:block;**"/>
1 голос
/ 18 декабря 2011

Добавить следующий атрибут к элементу IMG : 

style="display: block;"

Я добавил его для вас http://jsfiddle.net/xE9Qr/

По умолчанию IMG display is inline-block , который создает нежелательный пробел после.

Я проверил его, используя http://ctrlq.org/html-mail/, и пробелы между элементами TR исчезли.Запомните, чтобы увидеть результат, который вы должны отправить по электронной почте макет таблицы HTML на вашу учетную запись gMail.

0 голосов
/ 18 декабря 2011

Добавление align = "top" к изображениям представляется возможным исправлением: 

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
    <img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
    <img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
    <img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
    <a href="addlater"><img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></a></td>
</tr>
</table>
...