Microsoft Outlook 条件格式问题

Question

我在 Mailchimp 中编写了自己的电子邮件，并在测试时意识到并忘记了 Microsoft Outlook 的问题。我知道 Microsoft 是出了名的困难，并且不会像其他平台那样呈现 HTML 和 CSS 电子邮件。

我遇到的主要问题是我的图像爆炸了。我看过这篇文章：（https://medium.com/@jasemiller/a-fix-for-outlook-image-issues-in-html-email-campaigns-b8dd1c8f7d16） 找出解决此问题的方法...为 Microsoft Outlook 使用条件格式。

现在我有一个两列的标题，其中一列有一个徽标，另一列有几个标题 (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 -->

目的是显示一个包含 2 列的标题，其中一列在左侧带有徽标，右侧列带有标题/标题。因此 Microsoft Outlook 应该只呈现代码以显示条件语句中的列，并且不应重复并显示两组代码。由于 DIV 状态为 display:none，因此条件语句之外的任何内容都应该被隐藏。目前它没有将代码隐藏在语句之外并重复显示标题两次。

此问题仅适用于 Outlook，因为电子邮件在其他平台上显示完美。

Answer 1

你把mso-hide: all;放错地方了。

您评论过的每个部分

仅当不在 MICROSOFT / OUTLOOK 中时使用此代码

是它应该在的地方。把它放在包装表元素中。我刚刚在 Litmus builder 中做了一个快速测试，它没有重复。