Интервал в HTML-адрес электронной почты на Android GMAIL App

В моем HTML-письме электронной почты между заголовком header.png и body.png (их таблицы строк, на самом деле) есть лишнее пространство. Я не могу понять, почему это происходит. Это происходит только в Gmail для Android, а не в Gmail для Iphone. Вот код:Интервал в HTML-адрес электронной почты на Android GMAIL App

<body topmargin="0"> 
<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0; border: none; border: 1px solid #b76f49"> 
    <tr> 
     <td width="600" style="display:block !important;"> 
      <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;"> 
       <tr> 
        <td width="600" style="line-height:0;"> 
         <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;line-height:0;font-size:1px;"> 
          <tr> 
           <td width="17" style="line-height:0;min-width:17px;"> 
            <img src="headerleft.png" width="17" style="display:block !important; line-height:0;font-size:1px;" align="absbottom"> 
           </td> 
           <td width="567" style="line-height:0;min-width:567px;"> 
            <img alt="" border="0" width="567" src="header.png" style="display:block !important; line-height:0;font-size:1px;" align="absbottom"> 
           </td> 
           <td width="16" style="line-height:0;min-width:16px;"> 
            <img src="headerright.png" width="16" style="display:block !important; line-height:0;font-size:1px;" align="absbottom"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td width="600" style="display:block !important;"> 
         <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;"> 
          <tr> 
           <td width="17" style="border-right:3px solid #b76f49; min-width:17px; font-size:1px;"> 
            <img src="bodyleft.png" width="17" border="0" style="display:block !important; line-height:0; font-size:1px;"> 
           </td> 
           <td width="561"> 
            <table cellpadding="0" cellspacing="0" width="561" style="border-collapse: collapse; border-spacing:0;"> 
             <tr> 
              <td width="20" style="font-size:1px;"> 
               &nbsp; 
              </td> 
              <td width="357" valign="top" style="font-family: Arial; font-size: 14px; font-color: #000;"> 
               <p style="font-family:Arial; font-size: 16px; font-weight: bold; color:#004685;">HEader</p> 
               Hello,<br><br> 

               <ul> 
                <li></li> 
                <li></li> 
                <li></li> 
                <li></li> 
               </ul> 
               &nbsp; 
              </td> 
              <td width="184" style="min-width:184px;"> 
               <img src="bodyrightimage.png" width="170" height="400" border="0" align="right" style="font-size: 1px; line-height:0px; display:block!important;"> 
              </td> 
             </tr> 
            </table> 
           </td> 
           <td width="30" style="border-left:3px solid #b76f49;min-width:30px;"> 
            <img src="bodyright.png" height="400" width="16" border="0" style="display:block !important; line-height:0; font-size: 1px;"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr>

источник

2015-08-13 Hennessey

HTML-письмо не весело. Посмотрите на https://www.campaignmonitor.com/dev-resources/ – ceejayoz

Вы пытались удалить '! Important' после' display: block'? – Tiquelou

HTML подсчитывает разрывы строк, как пробел, так что если вы используете ячейки таблицы (Ик) для целей компоновки, то этот код:

<tr> 
    <td> 
     <img ... /> 
       ^---line break here 
    </td> 
^^^---indentation whitespace here 
    <td> 
     <img ... /> 
    </d> 
</tr>

будет показан как

[img] [img] 
    ^----linebreak+indentation as whitespace

Простое решение: не переводите </td> на отдельной строке:

<tr> 
    <td><img ../></td> 
    <td><img ../></td> 
</tr>

источник

2015-08-13 14:44:58

Я дам ему попробовать, но это для HTML-письма. Чего еще я бы использовал ячейку таблицы? – Hennessey

Табличные данные? использование таблиц для макета давно вышло из стиля, когда был введен css. –

Вы когда-нибудь кодировали HTML-письмо только с CSS и DIVS? – Hennessey

Интервал в HTML-адрес электронной почты на Android GMAIL App

ответ

Смежные вопросы