Microsoft Outlook 条件格式问题

Posted 2023-03-24

【中文标题】Microsoft Outlook 条件格式问题

【英文标题】：Microsoft Outlook Conditional Formatting Issues

【发布时间】：2019-08-30 18:07:07

【问题描述】：

我在 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" >
                 <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" >
                        <tr>
                            <td valign="top">
                                <div class="LogoContainer">
                                    <table align="left" >
                                        <tr>
                                            <td>
                                                <img  style="width=100px;" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" >
                                            </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"  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" >
                        <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，因为电子邮件在其他平台上显示完美。

【问题讨论】：

你试过 CSS 中的mso-hide:all; 吗？

是的，在每个条件语句中的每个 DIV 中都有说明。

您的代码有两个部分。 <!--[if mso]> 和 <![endif]--> 之间的任何内容都只能由 Outlook 读取。而且由于您没有代码可以说not outlook，因此其他所有内容也都在被读取。有道理吗？

【参考方案1】：

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

您评论过的每个部分

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

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

【讨论】：

如果我使用确切的代码，实际上在所有 Outlook 中都有电子邮件标题和 2019 年 3 月的副本。您是否将 OP 的代码与 litmus builder 的 doctype 一起使用？

艾伦，Syfer 非常感谢您的提示和指导。艾伦，我将“style="mso-hide: all;”插入到您建议的部分的容器表中，这些部分带有以下注释：仅在不在 MICROSOFT / OUTLOOK 中时使用此代码所以我发现它已删除重复的徽标，但遗憾的是没有删除包含标题和日期的重复表。有没有任何想法，为什么这会隐藏徽标表而不是标题和日期表？非常感谢支持

@JamieClague 在要隐藏的元素上使用 CSS