Я закодировал свою электронную почту в Mailchimp, понял и забыл проблемы с Microsoft Outlook при тестировании.Я знаю, что Microsoft, как известно, сложная задача и не отображает электронные письма HTML и CSS так же, как другие платформы.
Основная проблема, с которой я столкнулся, - это взрыв моих изображений.Я посмотрел на эту статью: (https://medium.com/@jasemiller/a-fix-for-outlook-image-issues-in-html-email-campaigns-b8dd1c8f7d16), чтобы найти решение этой проблемы ... использовать условное форматирование для Microsoft Outlook.
Теперь у меня есть заголовок, который состоит из двух столбцов и имеетлоготип в 1 столбце и несколько заголовков (h2, h3) в другом. Я немного обошелся с этим, но чувствую, что почти у цели. Проблема в том, что Microsoft Outlook, похоже, не отображает код (div style = "display: none") и продолжает отображать код, который следует игнорировать, означая, что заголовок повторяется.
#templateHeader{
/*@editable*/background-color:#001f5e;
}
.HeaderContainer{
width:300px !important;
max-width:300px !important;
}
#logo{
max-width:100% !important;
width:100% !important;
}
.LogoContainer img{
max-width:100% !important;
width:100% !important;
float:left;
}
<!-- BEGIN HEADER // -->
<tr>
<td valign="top" id="templateHeader">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<!-- USE THIS CODE ONLY WHEN IN MICROSOFT / OUTLOOK & HIDE OTHER TABLES OUTSIDE OF THIS CONDITION STATEMENT NOT TO SHOW -->
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
<tr>
<td valign="top">
<div class="LogoContainer">
<table align="left" width="300">
<tr>
<td>
<img width="300" style="width=100px;" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="Bold Consultancy Logo">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
<!-- USE THIS CODE ONLY WHEN NOT IN MICROSOFT / OUTLOOK -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
<tr>
<td valign="top">
<div class="LogoContainer">
<img id="logo" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="" mc:edit="preheader_leftcol">
</div>
</td>
</tr>
</table>
<!-- END THE CONDITION STATEMENT -->
<!--[if mso]>
</div>
<![endif]-->
<!-- USE THIS CODE ONLY WHEN IN MICROSOFT / OUTLOOK & HIDE OTHER TABLES OUTSIDE OF THIS CONDITION STATEMENT NOT TO SHOW -->
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
<tr>
<td valign="top">
<div class="HeaderTitles" mc:edit="preheader_rightcol">
<h2>Email Title</h2>
<h4>March 2019</h4>
</div>
</td>
</tr>
</table>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
<!-- USE THIS CODE ONLY WHEN NOT IN MICROSOFT / OUTLOOK -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
<tr>
<td valign="top">
<div class="HeaderTitles" mc:edit="preheader_rightcol">
<h2>Email Title</h2>
<h4>March 2019</h4>
</div>
</td>
</tr>
</table>
<!-- END THE CONDITION STATEMENT -->
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- // END MODULE: HEADER -->
Цель состоит в том, чтобы отобразить заголовок с двумя столбцами, один из которых с логотипом слеваи правый столбец с заголовками / заголовками. Таким образом, Microsoft Outlook должен только визуализировать код для отображения столбцов в условном выражении и НЕ должен повторяться и показывать оба набора кода. Все, что находится за пределами условного выражения, должно быть скрыто благодаря DIVкакие состояния отображают: нет. В настоящее время он не скрывает код за пределами оператора и повторяется и шоПоднимите верхний колонтитул дважды.
Эта проблема только для внешнего вида, поскольку электронная почта отлично отображается на других платформах.