MJML 在 Outlook 中未正确输出

如何解决MJML 在 Outlook 中未正确输出

我有以下 MJML：

 <mjml>
  <mj-body background-color="#f2f8f9">
    <mj-section background-color="#77c5d5" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-image src="https://www.test.com/white-logo.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" width="100%">
        <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="25px">Nieuwe vrijwilligers vacatures</mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding-bottom="20px">
      <mj-column vertical-align="top" width="100%">
        <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">
          Er zijn enkele vrijwilligersvacatures bij jou in de buurt,die passen bij jouw interesse. 
Bekijk even of het iets voor jou is! Je kan ze ook doorsturen naar vrienden. Het zou echt top zijn als ze geholpen kunnen worden
<br/><br/>
          Je kan je buurten en interesses voor een betere matching steeds veranderen in je profiel.
        </mj-text>
        <mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#77c5d5" border="2px solid #D9E9EB;" color="#ffffff" font-family="open Sans Helvetica,sans-serif">Zoek vrijwilligerswerk!</mj-button>
      </mj-column>
    </mj-section>
    
  <mj-section background-color="#FFFFFF">
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica,sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Nieuwe vacatures gevonden voor jou</mj-text>
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica,sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Dag- of nachtoppas in BREE
      </mj-button>
      <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    <mj-column width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
      </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica,sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Vrijwilliger voor administratieve hulp aan huis
         </mj-button>
        <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
        <mj-text padding-bottom="0">Begeleiding</mj-text>
        <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
        <mj-text padding-top="0">Jongeren</mj-text>
      </mj-column>
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica,sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Andere interessante vacatures</mj-text>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/13333/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica,sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          CALM pour une cohabitation interculturelle
      </mj-button>
      <mj-text padding-bottom="0">Brussel (1000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column width="100%">
        <mj-image src="https://www.test.be/design/img/email-footer-no-clouds.png" alt="footer"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="middle" width="100%">
        <mj-social font-size="14px" icon-size="25px" mode="horizontal">
          <mj-social-element name="facebook" href="https://www.facebook.com/test.be"></mj-social-element>
          <mj-social-element name="instagram" href="https://www.instagram.com/test.be/"></mj-social-element>
          <mj-social-element  name="linkedin" href="https://www.linkedin.com/company/test"></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 - test. Alle rechten voorbehouden.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

这在 Outlook Web 和 Gmail 中完美呈现。但是在 Outlook 客户端（和 Windows 邮件）中，布局只是彼此相邻，如下所示：

可能是什么问题？

解决方法

我设法通过在我的 MJML 代码的每一行周围添加 's 来解决这个问题，并且它在 Outlook 客户端中完美呈现。