MJML 布局在 Outlook 客户端中非常有问题，但在其他客户端中还可以

如何解决MJML 布局在 Outlook 客户端中非常有问题，但在其他客户端中还可以

我使用 MJML 创建了 2 种不同的电子邮件布局，一种带有一个按钮，另一种带有 2 个按钮。 这些电子邮件在大多数客户端（网络邮件、gmail、Outlook Web 等）中看起来都很好，但在 Outlook 客户端中看起来很糟糕。

我读到 width="" 在 Outlook 中从 MJML 到 HTML 的支持不是很好，所以我们删除了 MJML 中的所有宽度参数。除此之外，我们在电子邮件中没有使用任何不寻常的东西。

这是 MJML：

<mjml>
      <mj-body background-color="#f2f8f9">
        <mj-section background-color="#77c5d5" padding-bottom="0px" padding-top="0">
          <mj-column vertical-align="top">
            <mj-image src="https://www.goomlandscapes.co.nz/wp-content/uploads/2018/08/logo-placeholder.png" alt="logo" align="center" border="none" width="200px" padding-left="0px" padding-right="0px" padding-bottom="10px" padding-top="10px"></mj-image>
          </mj-column>
        </mj-section>
        <mj-section background-color="#FFFFFF" padding-bottom="0px" padding-top="0">
          <mj-column vertical-align="top">
            <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica,Arial,sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="15px">Welkom bij WebsiteName</mj-text>
          </mj-column>
        </mj-section>
        <mj-section background-color="#FFFFFF" padding-bottom="20px">
          <mj-column vertical-align="top">
            <mj-text align="left" color="#000000" font-size="18px" font-family="open Sans Helvetica,sans-serif" padding-left="25px" padding-right="25px">
              <span style="color:#000000">Dag John,</span>
            </mj-text>
            <mj-text align="left" color="#000000" font-size="15px" font-family="open Sans Helvetica,sans-serif" padding-left="25px" padding-right="25px">
              bedankt om te registreren bij ons. <br/>
              Je profiel is aangemaakt en klaar voor gebruik. Je kan inloggen met je emailadres: {{email}}.<br/><br/>
              Met vriendelijke groeten.
            </mj-text>
          </mj-column>
        </mj-section>
        <mj-section background-color="#FFFFFF" padding-bottom="20px">
          <mj-column vertical-align="top">
            <mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#FFFFFF" border-radius="12px" border="2px solid #D9E9EB;" color="#000000" font-family="open Sans Helvetica,sans-serif">Doe iets!</mj-button>
          </mj-column>
          <mj-column vertical-align="top">
            <mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#FFFFFF" border-radius="12px" border="2px solid #D9E9EB;" color="#000000" font-family="open Sans Helvetica,sans-serif">Doe iets!</mj-button>
          </mj-column>
        </mj-section>
        <mj-section padding-bottom="0px" padding-top="0">
          <mj-column>
                <mj-image src="https://3263vihaxx3jy9zn2ikegau7-wpengine.netdna-ssl.com/wp-content/uploads/2018/12/footer-bg-placeholder.jpg" alt="footer"></mj-image>
          </mj-column>
        </mj-section>
        <mj-section padding-bottom="0px" padding-top="0">
          <mj-column vertical-align="middle">
            <mj-social font-size="14px" icon-size="25px" mode="horizontal">
              <mj-social-element name="facebook" href="xyz"></mj-social-element>
              <mj-social-element name="instagram" href="xyz"></mj-social-element>
              <mj-social-element  name="linkedin" href="xyz"></mj-social-element>
            </mj-social>
          </mj-column>
        </mj-section>
        <mj-section>
          <mj-column>
            <mj-text align="center" font-size="10px" padding-top="0">copyright 2021 - WebsiteName. Alle rechten voorbehouden.</mj-text>
          </mj-column>
        </mj-section>
      </mj-body>
    </mjml>

MJML 中的预览如下所示：

因此生成的 HTML 被放入我们的系统并通过 SendGrid 发送。 生成的电子邮件在 Outlook 中如下所示：

这封电子邮件在 Outlook 客户端中看起来如此糟糕是怎么回事？ （它在 Windows 默认邮件客户端中看起来也同样糟糕）