MJML中mj-section设direction="rtl"时Outlook桌面端出现1px水平线求助

问题描述 #

给包含两列的mj-section设置direction="rtl"属性后，在Outlook桌面端查看邮件时，该section会出现一条异常水平线。

复现步骤 #

• 将以下MJML代码渲染为HTML；
• 将生成的HTML作为邮件发送，在Outlook桌面端（MSO Desktop）中查看效果。

MJML代码 #

<mjml>
  <mj-body background-color="red">
    <mj-section direction="rtl" background-color="#ffffff" padding="16px">
      <mj-column vertical-align="middle">
        <mj-image src="https://picsum.photos/536/354"></mj-image>
      </mj-column>
      <mj-column vertical-align="middle">
        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding="16px">
      <mj-column vertical-align="middle">
        <mj-image src="https://picsum.photos/536/354"></mj-image>
      </mj-column>
      <mj-column vertical-align="middle">
        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

问题截图 #

已尝试的无效方案 #

• 调整section及内容的内边距；
• 给section内所有元素添加白色背景；
• 尝试各类CSS技巧；
• 添加MSO条件语句。

解决方案 #

该问题是Outlook桌面端Word渲染引擎对RTL布局表格的渲染bug导致的，可通过以下方式修复：

方法1：给mj-section添加自定义MSO样式 #

在MJML头部加入自定义样式，针对Outlook桌面端重置表格间距：

<mjml>
  <mj-head>
    <mj-style>
      .rtl-fix {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      .rtl-fix table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
      }
    </mj-style>
  </mj-head>
  <mj-body background-color="red">
    <mj-section direction="rtl" background-color="#ffffff" padding="16px" css-class="rtl-fix">
      <mj-column vertical-align="middle">
        <mj-image src="https://picsum.photos/536/354"></mj-image>
      </mj-column>
      <mj-column vertical-align="middle">
        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding="16px">
      <mj-column vertical-align="middle">
        <mj-image src="https://picsum.photos/536/354"></mj-image>
      </mj-column>
      <mj-column vertical-align="middle">
        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

方法2：修改渲染后的HTML表格属性 #

如果方法1无效，可在生成的HTML中找到对应RTL section的<table>标签，添加以下样式属性：

<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;" cellpadding="0" cellspacing="0">

原理：Outlook桌面端RTL布局下表格默认间距会触发这条水平线，通过重置表格间距、强制边框合并可以消除该问题。

内容的提问来源于stack exchange，提问作者lerouxm