Yahoo Mail корректирует поля в HTML-письме

Question

Я озадачен тем, что происходит, поэтому я понял, что S.O. может помочь. У меня есть HTML-адрес электронной почты, и все выглядит отлично, за исключением нескольких патронов.

Вот как это выглядит в Outlook, AOL, GMail:

Вот как это выглядит в Yahoo:

Обновлено Я добавить text-align значения в <p> тегов, но результат остается такой же.

Вот мой код:

<table> 
    <tbody> 
    <tr> 
     <td width="16" align="left" valign="top"> 
     <img src="images/spacer.gif" style="outline: none; border: none;" alt=" " width="16" height="5" /> 
     </td> 
     <td width="10" align="right" valign="top" style="color: #231F20;"> 
     <p style="margin: -20px 0px 10px 0px; font-size: 11px; color: #231F20; text-align:right;">*</p> 
     </td> 
     <td width="492" align="left" valign="top" style="color: #231F20; font-size: 12px; padding-bottom: 4px;"> 
     <p style="margin: -20px 0px 10px 0px; font-size: 11px; text-align:left;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </p> 
     </td> 
    </tr> 

    <tr> 
     <td width="16" align="left" valign="top"> 
     <img src="images/spacer.gif" style="outline: none; border: none;" alt=" " width="16" height="5" /> 
     </td> 
     <td width="10" align="right" valign="top" style="color: #231F20;"> 
     <p style="margin: 0px 0px 0px 0px; font-size: 11px; color: #231F20; text-align:right;"><sup>&dagger;</sup></p> 
     </td> 
     <td width="492" align="left" valign="top" style="color: #231F20; font-size: 12px; padding-bottom: 4px;"> 
     <p style="margin: 0px 0px 0px 0px; font-size: 11px; text-align:left;;"> 
      Pellentesque ipsum sem, venenatis a condimentum vitae, gravida vel neque. Suspendisse placerat sapien in leo eleifend porta. Donec ut augue vel felis condimentum aliquet. Curabitur luctus, nunc vel blandit elementum, ante lacus facilisis nulla, ac tincidunt massa quam in eros. Nulla facilisi. 
     </p> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Позвольте мне знать, если у вас есть какие-либо вопросы. Я понятия не имею, что происходит. Обычно Outlook - это боль, с которой приходится иметь дело, а не Yahoo.

Answer 1

Что делать, если вы изменили <p style="margin: -20px 0px 10px 0px; font-size: 11px"> к

<p style="margin: 0px 0px 10px 0px; font-size: 11px">

на

<p style="margin: -20px 0px 10px 0px; font-size: 11px"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 

Answer 2

Вы не должны использовать запас в HTML по электронной почте. Он неоднороден в поддержке/согласованности, Outlook.com не поддерживает его вообще. Вместо этого используйте отступы на ячейках таблицы контейнеров.

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

<table> 
    <tr> 
     <td width="26" align="right" valign="top">&bull;&nbsp; 
     </td> 
     <td width="492" align="left" valign="top" style="color: #231F20;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </td> 
    </tr> 
    <tr> 
     <td height="20">&nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td width="26" align="right" valign="top">&dagger;&nbsp; 
     </td> 
     <td width="492" align="left" valign="top" style="color: #231F20;"> 
      Pellentesque ipsum sem, venenatis a condimentum vitae, gravida vel neque. Suspendisse placerat sapien in leo eleifend porta. Donec ut augue vel felis condimentum aliquet. Curabitur luctus, nunc vel blandit elementum, ante lacus facilisis nulla, ac tincidunt massa quam in eros. Nulla facilisi. 
     </td> 
    </tr> 
</table> 

Answer 3

Это не просто Yahoo! Перспективы тоже

Эта недавняя статья [1/29/2013] стоит читать

Outlook.com drops margin and float support entirely

В основном они не нашли обходной путь для поддержки margin и предлагают вернуться к <table> или в некоторых случаях просто padding.

Мы также рекомендуем вернуться к корням и с использованием ячеек таблицы и атрибутов cellpadding и cellspacing, где это возможно. Это краеугольные камни подлинно пуленепробиваемого макета электронной почты HTML.