Windows端Outlook中MJML区块宽度不一致问题求助

MJML针对Windows桌面版Outlook（基于MSO渲染引擎）的布局逻辑是：当区块内包含图像这类具有明确固定尺寸的元素时，会自动生成带**固定宽度（默认600px）**的条件式包裹表格，强制容器保持固定宽度；但仅包含<mj-text>的区块，由于没有触发固定宽度的元素，MJML不会生成这个MSO专属的固定宽度表格。而Outlook的MSO引擎对纯文本容器的宽度会自适应窗口尺寸，这就导致带图区块固定600px、纯文本区块自适应的对齐错位问题，在窗口宽度小于600px时尤为明显。

以下两种方案均不会影响其他邮件客户端的正常显示，比插入隐藏图片的临时方案更简洁语义化：

方案1：通过MSO专属样式强制固定宽度 #

利用MJML的css-class属性结合MSO条件注释，给纯文本区块的容器强制设置固定宽度：

<mjml>
  <mj-head>
    <!-- 仅对MSO/Outlook生效的样式 -->
    <mj-raw>
      <!--[if mso]>
      <style>
        .outlook-fixed-width table {
          width: 600px !important;
        }
      </style>
      <![endif]-->
    </mj-raw>
  </mj-head>
  <mj-body>

    <!-- 给纯文本区块的section添加自定义class -->
    <mj-section css-class="outlook-fixed-width">
      <mj-column>
        <mj-text align="center">
          <b>mj-section with 1 mj-column containing just mj-text (centered).</b> - Text behaves responsive, breaks at 100% and stays centered in window, even if narrower than 600px.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section>
      <mj-column>
        <mj-image width="100px" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
        <mj-text align="center">
          <b>mj-section with 1 mj-column containing mj-image + mj-text (centered).</b> - Container runs 600px wide, regardless of window size. Text is centered based on 600px container width.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section css-class="outlook-fixed-width">
      <mj-column>
        <mj-text align="center">
          <b>mj-section with 1 mj-column containing only mj-text (centered).</b> - Container runs 600px wide, regardless of window size. Text is centered based on 600px container width.
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

方案2：用<mj-raw>插入MSO专属空表格触发固定宽度逻辑 #

如果不想用样式，也可以在纯文本区块的<mj-column>内插入一个仅对Outlook可见的空表格，触发MJML的固定宽度包裹逻辑：

<mj-section>
  <mj-column>
    <mj-raw>
      <!--[if mso]><table width="600px" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
    </mj-raw>
    <mj-text align="center">
      <b>mj-section with 1 mj-column containing just mj-text (centered).</b> - Text behaves responsive, breaks at 100% and stays centered in window, even if narrower than 600px.
    </mj-text>
    <mj-raw>
      <!--[if mso]></td></tr></table><![endif]-->
    </mj-raw>
  </mj-column>
</mj-section>

修改后，Windows桌面版Outlook中所有区块都会保持600px固定宽度，文本对齐一致；其他客户端（如Gmail、Apple Mail、网页版Outlook）仍会保持原有的响应式布局，不受影响。

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