#html #email #outlook #html-email #mailchimp
#HTML #Адрес электронной почты #outlook #html-электронная почта #mailchimp
Вопрос:
Я закодировал свою собственную электронную почту в 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 amp; 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 amp; 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 -->
Цель состоит в том, чтобы отобразить заголовок с 2 столбцами, один с логотипом слева, а правый столбец с заголовками / заголовками. Таким образом, Microsoft Outlook должен отображать код только для отображения столбцов в условном операторе и не должен повторять и показывать оба набора кода. Все, что находится за пределами инструкции condional, должно быть скрыто благодаря DIV, в котором указано display:none . В настоящее время он не скрывает код за пределами инструкции, а повторяет и показывает заголовок дважды.
Эта проблема только для Outlook, поскольку электронная почта отлично отображается на других платформах.
Комментарии:
1. вы пробовали
mso-hide:all;
использовать CSS?2. Да, это указано в каждом DIV в каждом условном операторе.
3. Ваш код состоит из двух частей. Все, что находится между
<!--[if mso]>
и<![endif]-->
, будет прочитано только Outlook. И поскольку у вас нет кода, чтобы сказатьnot outlook
, все остальное также читается. Имеет смысл?
Ответ №1:
Вы попали mso-hide: all;
не в то место.
Каждый раздел, который вы прокомментировали с
ИСПОЛЬЗУЙТЕ ЭТОТ КОД ТОЛЬКО ТОГДА, КОГДА ЕГО НЕТ В MICROSOFT / OUTLOOK
Там, где это должно быть. Поместите его в элементы таблицы переноса. Я только что провел быстрый тест в Litmus builder, и он не дублируется.
Комментарии:
1. На самом деле во всех Outlook есть дубликат заголовка электронного письма и марта 2019 года, если я использую точный код. Вы использовали код OP с doctype для litmus builder?
2. Алан, Syfer большое спасибо за советы и рекомендации. Алан, я пошел и вставил «style =»mso-hide: all;» в таблицы контейнеров в предложенных вами разделах, которые прокомментированы: ИСПОЛЬЗУЙТЕ ЭТОТ КОД ТОЛЬКО ТОГДА, КОГДА ЕГО НЕТ В MICROSOFT / OUTLOOK, поэтому я обнаружил, что он удалил дубликат логотипа, но, к сожалению, нетудалена повторяющаяся таблица, содержащая заголовок и дату. Есть ли какие-либо мысли относительно того, почему это скроет таблицу для логотипа, но не таблицу для заголовка и даты? Большое спасибо за поддержку
3. @JamieClague Используйте CSS для элемента, который вы хотите скрыть