Интервалы между шаблонами электронной почты в Outlook - PullRequest
Новая
       46

Интервалы между шаблонами электронной почты в Outlook

0 голосов
/ 09 апреля 2019

Я создаю шаблон электронной почты, и, несмотря на мои попытки использовать самый простой, 2005 год, HTML-код, о котором я мог подумать, когда я пытаюсь использовать шаблон в Outlook, пробел полностью запутывается.Простой код вроде этого: 

<html><head><meta content="text/html; charset=iso-8859-2"></head><body>

<table align="center" cellspacing=”0” cellpadding=”0” width="768" style="border:1px solid black">

<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="24"><td><font face="Arial" size="5" color="#ff6200"><b>Lorem ipsum?</b></font></td></tr>
<tr height="10"><td></td></tr>
<tr align="center" height="100"><td><table><td width="280"><font face="Arial" size="4"><center> adipiscing elit, sed do eiusmod<br /><br />tempor incididunt ut labore et </center></font></td></table></td></tr>
<tr height="24"><td></td></tr>
<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="36"><td><table><td width="420"><font face="Arial" size="3"><center>Lorem ipsum dolor sit amet</center></font></td></table></td></tr>
<tr height="7"><td></td></tr>
<tr align="center" height="20"><td><a href="#" style="text-decoration: none"><font face="Arial" size="3" color="#ff6200"><b>consectetur</b></font></a></td></tr>
<tr height="27"><td></td></tr>
<!-- ----------------------- -->
<tr align="center" height="170" bgcolor="#f2f2f2"><td><center><font face="Arial" size="1" color="#000000" style="line-height: 1.8">
olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br style="line-height: 10%" />
Lorem:<br /></font>
<a href="#" style="text-decoration: none"><font face="Arial" size="1" color="#ff6200" style="line-height: 1.8">eu fugiat nulla pariatur</font></a><br />
<font face="Arial" size="1" color="#000000" style="line-height: 1.8">esse cillum dolor<br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</font></center></td></tr>


</table>

</body></html>

Рендеринг корректно для меня как в Firefox, так и в IE, выглядит так: enter image description here

Однако при вставке в виде текстав Outlook 2016 это выглядит так: enter image description here

(также, вот как это выглядит выделенным, где можно увидеть некоторые дополнительные интервалы :) enter image description here

Практически каждый вертикальный интервал запутан.Как мне это исправить?Поскольку он корректно отображается в Internet Explorer , я надеялся, что он будет работать в Outlook, но, похоже, это не так.

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Outlook 2016 устанавливает максимальные значения TD как минимум в 17px. Чтобы избежать этого, установите высоту строки и размер шрифта равными 1 пикселю (или желаемому размеру). Вот так я в последнее время строю все свои проставки. Например: 

<table border="0" cellpadding="0" cellspacing="0"> 
<tr>
    <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
    &nbsp;
    </td>
</tr>

Если все, что вам нужно, это вертикальное расстояние между элементами списка, используйте margin-bottom. Не используйте отступы, так как Outlook не будет их поддерживать.

Стили Microsoft Office (стили MSO) немного напрягают ваши строки. Если ваш интервал кажется неправильным, попробуйте. Просто добавьте «mso-line-height-rule: точно;» непосредственно перед стилем высоты строки, встроенным или встроенным.

Вот вам больше информации о расстоянии в электронных письмах HTML, если вам это нужно! https://www.emailonacid.com/blog/article/email-development/spacing-techniques-in-html-email/#utm_source=Blog&utm_medium=website&utm_campaign=LeadGen_2018&utm_term=development

Edit:

Я бы сказал, что это, вероятно, то, что нужно обрабатывать с помощью дополнительного встроенного CSS. Потенциально добавление mso-table-lspace: 0px; mso-table-rspace: 0px; может помочь. Если они обеспокоены тем, что их встроенный CSS-файл перезаписывается, они могут применить !important к концу каждого.

например. mso-table-lspace: 0px !important; mso-table-rspace: 0px !important;

Элементы, описанные выше, обычно применяются к этим элементам HTML в CSS, применяемом в теге <head> электронного письма, и могут быть встроены в каждый тег, с которым у них возникают проблемы:

table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; } td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }

Все они используются тем или иным образом, чтобы предотвратить добавление Outlook дополнительного дополнения к таблицам (<table>) и ячейкам таблицы (<td>).

0 голосов
/ 09 апреля 2019

вы можете использовать <tr> вместо <font> и <br>.Так что вы можете получить ожидаемое место 

<html><head><meta content="text/html; charset=iso-8859-2"></head><body>

<table align="center" cellspacing=”0” cellpadding=”0” width="768" style="border:1px solid black">

<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="24"><td><font face="Arial" size="5" color="#ff6200"><b>Lorem ipsum?</b></font></td></tr>
<tr height="10"><td></td></tr>
<tr align="center" height="100"><td><table><td width="280"><font face="Arial" size="4"><center> adipiscing elit, sed do eiusmod<br /><br />tempor incididunt ut labore et </center></font></td></table></td></tr>
<tr height="24"><td></td></tr>
<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="36"><td><table><td width="420"><font face="Arial" size="3"><center>Lorem ipsum dolor sit amet</center></font></td></table></td></tr>
<tr height="7"><td></td></tr>
<tr align="center" height="20"><td><a href="#" style="text-decoration: none"><font face="Arial" size="3" color="#ff6200"><b>consectetur</b></font></a></td></tr>
<tr height="27"><td></td></tr>
<!-- ----------------------- -->
<tr align="center" height="170" bgcolor="#f2f2f2"><td><center><font face="Arial" size="1" color="#000000" style="line-height: 1.8">
olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br style="line-height: 10%" />
Lorem:<br /></font>
<a href="#" style="text-decoration: none"><font face="Arial" size="1" color="#ff6200" style="line-height: 1.8">eu fugiat nulla pariatur</font></a><br />
<font face="Arial" size="1" color="#000000" style="line-height: 1.8">esse cillum dolor<br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</font></center></td></tr>


<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br style="line-height: 10%" />
Lorem:<br />
  </td>
</tr>

<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">eu fugiat nulla pariatur
  </td>
</tr>

<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">esse cillum dolor</a>
  </td>
</tr>
<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</a>
  </td>
</tr>


</table>

</body></html>
...