Outlook добавляет пространство ниже логотипа

Question

Я обновляю шаблон электронной почты HTML, чтобы он работал на мобильных устройствах. В основном это сообщение из двух столбцов, и я выравниваю столбцы. Есть некоторые условные комментарии для Outlook, а divs с inline-block для Gmail, так как у него нет медиа-запросов, и он работает достаточно хорошо.

Одна проблема, которую я не смог решить, находится в заголовке. Там есть логотип, дата рядом с ним и граница под ними. Граница должна быть в самом низу логотипа, но Outlook 2010 и 2013 в Windows (Outlook 2011 на Mac, а также outlook.com и Office 365 и каждый клиент, не являющийся внешним клиентом, в порядке) помещают пробел между ,

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

<center style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; table-layout: fixed; width: 100%"> 
 
    <div> 
 
     
 
     <!--[if (gte mso 9)|(IE)]> 
 
     <table width="600" align="center"> 
 
      <tr> 
 
      <td> 
 
      <![endif]--> 
 
     <table align="center" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0 auto; max-width: 600px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100%"> 
 
      <tr> 
 
      <td style="border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 10px; border-collapse: collapse; font-size: 0; Margin: 0; padding: 0; text-align: center" align="center"> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
      <table width="100%"> 
 
       <tr> 
 
       <td width="50%" valign="bottom"> 
 
      <![endif]--> 
 
       <div style="display: inline-block; Margin-right: 0; max-width: 390px; vertical-align: bottom; width: 100%"> 
 
       <table width="100%" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0"> 
 
        <tr> 
 
        <td style="border-collapse: collapse; font-size: 0; height: 90px; line-height: 0px; Margin: 0; padding: 0; vertical-align: bottom" valign="bottom"> 
 
         <table style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; text-align: left; width: 100%"> 
 
         <tr> 
 
          <td style="border-collapse: collapse; font-size: 0; height: 90px; line-height: 0px; Margin: 0; padding: 0; vertical-align: bottom" valign="bottom"> 
 
          <a href="browserversion" style="color: #1A1818; text-decoration: none"><img src="logo" alt="alt text" width="390" height="90" align="left" style="border: 0 none; display: block; height: auto; line-height: 100%; Margin: 0; max-height: 90px; max-width: 390px; outline: none; padding: 0; text-decoration: none; vertical-align: bottom; width: 100%" /></a> 
 
          </td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </div> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
        </td><td width="50%" valign="bottom"> 
 
      <![endif]--> 
 
       <div style="display: inline-block; Margin-right: 0; max-width: 210px; vertical-align: bottom; width: 100%"> 
 
       <table width="100%" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0"> 
 
        <tr> 
 
        <td style="border-collapse: collapse; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; font-weight: bold; height: 90px; line-height: 100%; Margin: 0; padding: 10px 0 5px; text-align: right; vertical-align: bottom; width: 100%" align="right" valign="bottom"> 
 
         <table style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; text-align: left; width: 100%"> 
 
         <tr> 
 
          <td style="border-collapse: collapse; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; font-weight: bold; height: 90px; line-height: 100%; Margin: 0; padding: 10px 0 5px; text-align: right; vertical-align: bottom; width: 100%" align="right" valign="bottom"> 
 
          September 25, 2015 
 
          </td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </div> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      <![endif]--> 
 
      </td> <!-- end .two-column.header --> 
 
      </tr> <!-- end row --> 
 
     </table> <!-- end .outer --> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     <![endif]--> 
 

 
    </div> 
 
    </center> 
 

 
    </body> 
 
</html>

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

Answer 1

я, наконец, нашел решение этой проблемы. Я добавил эти стили заголовка (так первый td, не закомментирована нужен класс заголовка):

<!--[if (gte mso 9)|(IE)]> 
<style type="text/css"> 
.header table { font-size:1px; line-height:0; mso-margin-top-alt:1px; } 
</style> 
<![endif]--> 

Это решение было найдено здесь: http://www.optimisedemail.com/2013/05/the-weekly-fix-outlook-2013-spacing.html