Рендеринг таблицы электронной почты в Windows Live Hotmail - PullRequest
0 голосов
/ 14 февраля 2011

Подпись HTML неправильно отображается в Hotmail в Chrome / Firefox / Safari, но отлично работает во всех этих браузерах и во всех других клиентах, которые я использовал до сих пор.Изображения, используемые для закругленных углов, по-видимому, имеют некоторую дополнительную высоту, добавленную к ячейкам их таблиц.

Есть довольно распространенные сообщения об очень похожей проблеме, которая предлагает использовать display: block для всех изображений, но это не такпохоже, исправили проблему.Вот мой код:

<table id="ecxofferbox" height="90" width="525" border="0" cellspacing="0" cellpadding="0" bgcolor="#005bab" style="font-family:Verdana, Tahoma, Helvetica, sans-serif;color:#fff">
<tbody><tr valign="top">
<td width="229" height="90" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle1.png" height="6" alt=""></td>
<td></td>
</tr>
<tr valign="top">
<td width="6"></td>
<td style="padding-left:5px" width="223" height="78">
<table cellpadding="0" cellspacing="0" height="78" width="223">
<tbody><tr valign="top"><td><font color="white" size="4" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Amazing offer here only £99.99</b></font></td></tr>
<tr><td></td></tr>
<tr valign="bottom"><td><a href="http://example.com" style="text-decoration:none" name="Please click here for further details" target="_blank"><font color="#ffc505" size="2" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Click here for more details</b></font></a></td></tr>
</tbody></table>
</td>
</tr>
<tr height="6" valign="bottom">
<td height="6" valign="bottom"><img src="http://estel.uwcs.co.uk/emailtest/circle4.png" alt=""></td>
<td></td>
</tr>
</tbody></table>
</td>
<td width="175" height="90"><img src="http://estel.uwcs.co.uk/emailtest/example.jpg" height="90" width="175" alt=""></td>
<td width="121" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td></td>
<td width="6" height="6" valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle2.png" height="6" alt=""></td>
</tr><tr valign="middle">
<td align="center" width="115" height="78"><img src="" alt="" height="71" width="71"></td>
<td height="78" width="6"></td>
</tr>
<tr valign="bottom">
<td></td>
<td valign="bottom" height="6"><img src="http://estel.uwcs.co.uk/emailtest/circle3.png" alt=""></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Который правильно отображается в IE (здесь в IE8) , но неправильно везде, где я смотрел (здесь Chrome 9 beta)

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

Ответы [ 3 ]

1 голос
/ 25 апреля 2012

Вы пробовали устанавливать цвета фона?

например. bgcolor="#FFF"

1 голос
/ 14 февраля 2011

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

0 голосов
/ 18 июня 2011

Если дисплей: блок; не работает, также установите margin:0; во встроенном стиле всех изображений. Я видел, как Gmail и Hotmail добавляли дополнительное вертикальное пространство к изображениям, которые исчезли после того, как я явно установил все поля на 0.

...