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应该仅呈现代码以在条件语句中显示这些列，并且不应重复并显示两组代码。借助状态为display：none的DIV，可以隐藏条件语句之外的所有内容。当前，它并没有将代码隐藏在语句之外，而是重复并显示了两次标题。

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

Answer 1

您在错误的位置输入了0.0。

您评论过的每个部分

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

应该在哪里。将其放在包装表元素中。我只是在Litmus builder中进行了快速测试，并且没有重复。

Microsoft Outlook条件格式问题

1 个答案: