MJML：在 mj 部分使用方向 rtl 时，Outlook 1px 水平

Question

在包含两列的部分上使用 Direction="rtl" 时，MS-outlook 桌面上会出现一条水平线。

重现步骤：

• 将此 MJML 代码呈现为 HTML
• 以电子邮件形式发送 HTML 并在 MSO Desktop 上查阅

<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>

我尝试了不同的方法，例如使用填充（部分/内容）、在该部分中包含的每个元素上添加白色背景、使用 css 进行不同的修改..添加“MSO 条件”*
 * 以及所有这些事情.

到目前为止还没有运气，我非常绝望。

热烈欢迎任何帮助，谢谢！

Answer 1

在这里找到了这个问题的答案：https://litmus.com/community/discussions/5286-mysterious-white-line-in-outlook

基本上，使用 MSO，您不会希望在同一张桌子上处理方向和填充。嵌套是关键。

因此，使用 mj-wrapper 进行填充，然后使用方向部分就成功了，错误消失了。

<mjml>

  <mj-body background-color="red">
  
    <mj-wrapper padding="16px">

      <mj-section direction="rtl" background-color="#ffffff" padding="0">
        
        <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-wrapper>
    
  </mj-body>
  
</mjml>