MJML中mj-raw标签内容显示位置异常的原因及解决方法求助

问题 #

用MJML开发邮件模板时，通过<mj-raw>插入自定义进度条HTML，代码里<mj-raw>放在logo、分割线和文本之后，但渲染后进度条跑到了所有元素的最前面，本该在文本下方显示。

异常渲染效果：

原代码：

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://img.mailinblue.com/5639673/images/content_library/original/63dbb013f48c2f3fee7d9e79.png"></mj-image>
        <mj-divider border-color="#0b54a0" border-width="2px"></mj-divider>
        <mj-text align="center" font-size="20px" color="#3b3f44" font-family="Verdana, Tahoma, Geneva, sans-serif">
          <h2>Hallo, $vorname! Wie versprochen, dein Ergebnis des Antreibertests!</h2>
        </mj-text>
        <mj-raw>
           <div style='width: 80%; margin: auto; position: relative;'>
             <div style='font-size: 32px; font-weight: 200; color: #fff; height: 40px; margin-bottom: 2px; background-color: rgb(21, 122, 110); float: left; width: 60%;'>&nbsp;Sei perfekt</div>
             <div style='height: 40px; margin-bottom: 2px; background-color: rgb(237, 125, 58); float: left; width: 20%; text-align: left;'></div>
             <div style='height: 40px; margin-bottom: 2px; background-color: rgb(163, 0, 27); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;'></div>
             <div style='font-size: 32px; border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); width: $perfektPro%; text-align: right; font-weight: 600; font-family: Verdana, Tahoma, Geneva, sans-serif; line-height: 40px; vertical-align: middle; border-radius: 0px 5px 5px 0px;'>$perfekt&nbsp;</div>
           </div> 
        </mj-raw>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

原因 #

<mj-raw>的工作机制是直接将内容插入到MJML编译后的HTML最外层，不参与内部组件的布局流。MJML会把<mj-image>、<mj-divider>、<mj-text>这些组件编译成嵌套的表格结构，<mj-raw>里的内容不会被整合到这个表格流中，再加上自定义HTML里用了浮动，就会被挤到页面最顶部。

解决办法 #

方法1：用<mj-text>包裹自定义HTML（推荐） #

<mj-text>支持嵌套自定义HTML，会自动把内容整合到MJML的表格布局里，保持代码中的顺序，同时还能兼容各种邮件客户端。

修改后的代码：

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://img.mailinblue.com/5639673/images/content_library/original/63dbb013f48c2f3fee7d9e79.png"></mj-image>
        <mj-divider border-color="#0b54a0" border-width="2px"></mj-divider>
        <mj-text align="center" font-size="20px" color="#3b3f44" font-family="Verdana, Tahoma, Geneva, sans-serif">
          <h2>Hallo, $vorname! Wie versprochen, dein Ergebnis des Antreibertests!</h2>
        </mj-text>
        <!-- 替换mj-raw为mj-text，包裹自定义HTML -->
        <mj-text>
           <div style='width: 80%; margin: auto; position: relative;'>
             <div style='font-size: 32px; font-weight: 200; color: #fff; height: 40px; margin-bottom: 2px; background-color: rgb(21, 122, 110); float: left; width: 60%;'>&nbsp;Sei perfekt</div>
             <div style='height: 40px; margin-bottom: 2px; background-color: rgb(237, 125, 58); float: left; width: 20%; text-align: left;'></div>
             <div style='height: 40px; margin-bottom: 2px; background-color: rgb(163, 0, 27); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;'></div>
             <div style='font-size: 32px; border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); width: $perfektPro%; text-align: right; font-weight: 600; font-family: Verdana, Tahoma, Geneva, sans-serif; line-height: 40px; vertical-align: middle; border-radius: 0px 5px 5px 0px;'>$perfekt&nbsp;</div>
           </div> 
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

方法2：给mj-raw内容添加清除浮动和表格包裹（兼容老客户端） #

如果必须用<mj-raw>，需要手动处理布局兼容：添加清除浮动的元素，把自定义HTML放到和MJML结构一致的表格里，确保内容融入布局流。

修改后的代码：

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://img.mailinblue.com/5639673/images/content_library/original/63dbb013f48c2f3fee7d9e79.png"></mj-image>
        <mj-divider border-color="#0b54a0" border-width="2px"></mj-divider>
        <mj-text align="center" font-size="20px" color="#3b3f44" font-family="Verdana, Tahoma, Geneva, sans-serif">
          <h2>Hallo, $vorname! Wie versprochen, dein Ergebnis des Antreibertests!</h2>
        </mj-text>
        <mj-raw>
          <!-- 清除前面元素的浮动，用表格包裹内容对齐MJML布局 -->
          <div style="clear: both;"></div>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <div style='width: 80%; margin: auto; position: relative;'>
                  <div style='font-size: 32px; font-weight: 200; color: #fff; height: 40px; margin-bottom: 2px; background-color: rgb(21, 122, 110); float: left; width: 60%;'>&nbsp;Sei perfekt</div>
                  <div style='height: 40px; margin-bottom: 2px; background-color: rgb(237, 125, 58); float: left; width: 20%; text-align: left;'></div>
                  <div style='height: 40px; margin-bottom: 2px; background-color: rgb(163, 0, 27); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;'></div>
                  <div style='font-size: 32px; border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); width: $perfektPro%; text-align: right; font-weight: 600; font-family: Verdana, Tahoma, Geneva, sans-serif; line-height: 40px; vertical-align: middle; border-radius: 0px 5px 5px 0px;'>$perfekt&nbsp;</div>
                </div>
              </td>
            </tr>
          </table>
        </mj-raw>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

总结 #

优先用方法1，因为<mj-text>会自动处理邮件客户端的兼容性问题，减少手动调试的工作量；方法2适合必须保留<mj-raw>的场景，但需要自己处理布局兼容细节。

内容的提问来源于stack exchange，提问作者D.Schall