Проблемы с условным форматированием Microsoft Outlook

#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 для элемента, который вы хотите скрыть