Дополнительный проездной прогноз 2013

Question

Моя электронная почта выглядит отлично повсюду, кроме Outlook 2013 + 2016. Кажется, что добавлено дополнение к верхней части моей финальной строки таблицы.

Вот мой код. Изображение имеет высоту 10 пикселей, кажется, что таблица имеет дополнительные 10px отступов к вершине.

Это розовый (иш) ряд, который вы можете видеть выше, где есть.

Вот мой код. Есть идеи?

<table width="600" align="center" cellspacing="0" cellpadding="0" style="padding: 0 !important;margin: 0 !important; background-color: #ed5d98;" bgcolor="#ed5d98"> 
     <tr> 
     <td> 
      <table width="600" cellspacing="0" border="0" cellpadding="0" align="center style="width: 600px !important; mso-line-height-rule:exactly"> 
      <tr> 
       <td width="600" valign="bottom" style="width: 600px !important;background-color: #fff mso-line-height-rule:exactly;" bgcolor="#fff"> 
       <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" /> 
       </td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 

Answer 1

Есть несколько вещей, которые вы можете попробовать. Сначала добавьте border = "0" к изображению, и вы также можете обернуть изображение в div с встроенной высотой css, установленной на изображение. Кроме того, вы можете выровнять изображение влево или вправо (в зависимости от макета), а также добавить встроенный маркер: 0px к изображению.

Answer 2

У вас есть правило mso-line-height: именно в вашем стиле, но не указали высоту строки или размер шрифта, поэтому Outlook будет предполагать что-то вроде 15px. Попробуйте добавить размер шрифта: 0; line-height: 1px; к вашему типу TD. Это, как правило, трюк для Outlook, 2013.

Answer 3

Это должно работать:

<table width="600" align="center" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="100%" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ed5d98"> 
      <table width="100%" cellspacing="0" border="0" cellpadding="0" align="center"> 
       <tr> 
        <td width="100%" valign="bottom" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ffffff"> 
         <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" style="display: block;"> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

• добавил font-size: 0; mso-line-height-rule: exactly; line-height: 0; в <td> сек для обеспечения точной высоты строки
• добавляемые display: block; в <img> отрицать высоту дополнительной линии
• удалены несколько повторяющихся атрибутов из <table> s и <td> s