Microsoft Outlook条件格式问题

Question

我在Mailchimp中编写了自己的电子邮件，并在测试时意识到并忘记了Microsoft Outlook的问题。我知道微软是非常困难的，并且不会像其他平台那样呈现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：none。目前它没有隐藏语句之外的代码并重复并显示两次标题。

这个问题仅适用于Outlook，因为电子邮件在其他平台上表现得非常完美。

Answer 1

你有mso-hide: all;在错误的地方。

您评论的每个部分

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

它应该在哪里。把它放在包装表元素中。我刚刚在Litmus构建器上进行了快速测试，并没有重复。