HTML 电子邮件模板 - mso 条件语句答案

【问题标题】：HTML Email template - mso conditional statementHTML 电子邮件模板 - mso 条件语句
【发布时间】：2020-07-30 14:23:07
【问题描述】：

我正在为一个项目使用 HTML 电子邮件模板。除了 Outlook 桌面应用程序 v16.0，我在 Gmail、Yahoo 和 Outlook 网络电子邮件客户端上都运行良好，我有一个间距渲染问题。我使用 mso 条件语句来定位这个特定版本。但它似乎不起作用我添加并包裹在 mso 语句中的边距底部没有承认。知道如何解决这个问题吗？。

Email rendered in Gmail and Outlook

这是我的代码：

<tr style="border-collapse:collapse">
  <td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
  <table cellpadding="10" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
    <tbody>
      <tr style="border-collapse:collapse">
        <td align="center" style="padding:0;Margin:0;width:560px" valign="top">
        <table cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;" width="100%">
          <tbody>
          <tr style="border-collapse:collapse">
            <!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->

            <!--[if gte mso 9]>
                   <td align="left" style="padding:0;Margin:0;Margin-bottom:8px;">
             <![endif]-->

              <!-- END  -->
              
              <td align="left" style="padding:0;Margin:0;">
              <p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You&rsquo;re just one step away from being</p>
              </td>
            </tr>
          </tbody>
        </table>
        </td>
      </tr>
    </tbody>
  </table>
  </td>
</tr>

【问题讨论】：

你的 sn-p 正确吗？其中的文字与您的屏幕截图“离存在一步之遥”与“一步之遥”不同。此外，您添加为 td 的分隔符将是该文本旁边的分隔符，而不是其下方

标签： html html-email email-templates

【解决方案1】：

您的 html 在 Outlook 上的两个之后是无效的。正如@jmona789 所说，一个 td 你把它放在不在上面的一边。也许这会更好地与一个新的

<tr style="border-collapse:collapse">
    <td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
        <table cellpadding="10" cellspacing="0"
            style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
            <tbody>
                <tr style="border-collapse:collapse">
                    <td align="center" style="padding:0;Margin:0;width:560px" valign="top">
                        <table cellpadding="0" cellspacing="0" role="presentation"
                            style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;"
                            width="100%">
                            <tbody>
                                <!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->

                                <!--[if gte mso 9]>
                                <tr style="border-collapse:collapse">
                                    <td height="8" style="height: 8px; font-size: 0px; line-height:0px">&nbsp;
                                    </td>
                                </tr>
                                 <![endif]-->

                                <!-- END  -->
                                <tr style="border-collapse:collapse">


                                    <td align="left" style="padding:0;Margin:0;">
                                        <p
                                            style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">
                                            You&rsquo;re just one step away from being</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

【讨论】：

【解决方案2】：

你在这里打错了，你把 margin 属性的首字母大写，将段落边距设置为 0。将此 margin 属性全部小写。请参阅以下代码中的拼写错误：

<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You&rsquo;re just one step away from being</p>

将所有 Margin 替换为小写 margin 以解决此问题。

【讨论】：