Outlook移动端HTML邮件列无法堆叠问题求助

我在制作HTML邮件时遇到一个问题：移动端设备上邮件的列无法堆叠显示，其余内容渲染均正常。我已经用display: block类实现小屏幕下的列堆叠效果，但只有Outlook移动端存在该问题，其他邮件客户端都能正常渲染并堆叠。请问是否需要添加Outlook专属条件来让其识别display: block？

现有代码 #

CSS样式 #

.stack .column {
    width: 100%;
    display: block;
}

HTML片段 #

<td class="column column-1"
    width="50%"
    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
    <table
        class="image_block block-2"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td class="pad"
                style="width:100%;padding-right:0px;padding-left:0px;padding-top:5px;">
                <div class="alignment"
                    align="center"
                    style="line-height:10px">
                    <img src="https://image.marketing.fiskerinc.com/lib/fe2f11727364047f721373/m/1/baf9400c-f3b0-4686-9195-8fbc3f2bf60d.png"
                        style="display: block; height: auto; border: 0; width: 75px; max-width: 100%;"
                        width="75">
                </div>
            </td>
        </tr>
    </table>
    <table
        class="paragraph_block block-3"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
        <tr>
            <td
                class="pad">
                <div
                    style="color:#000000;direction:ltr;font-family:Fisker-Bold,Arial, Helvetica, sans-serif;font-size:16px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:center;mso-line-height-alt:19.2px;">
                    <div
                        style="margin: 0;">
                        <b>Service Appointment</b>
                </div>
                </div>
            </td>
        </tr>
    </table>
    <table
        class="paragraph_block block-4"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
        <tr>
            <td class="pad"
                style="padding-top:10px;padding-bottom:5px;">
                <div
                    style="color:#000000;direction:ltr;font-family:Fisker-Regular,Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:120%;text-align:center;mso-line-height-alt:19.2px;">
                    <p
                        style="margin: 0;">
                        [Service Appointment Date]
                    </p>
                </div>
            </td>
        </tr>
    </table>
</td>

<td class="column column-1"
    width="50%"
    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
    <table
        class="image_block block-2"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td class="pad"
                style="width:100%;padding-right:0px;padding-left:0px;padding-top:5px;">
                <div class="alignment"
                    align="center"
                    style="line-height:10px">
                    <img src="https://image.marketing.fiskerinc.com/lib/fe2f11727364047f721373/m/1/baf9400c-f3b0-4686-9195-8fbc3f2bf60d.png"
                        style="display: block; height: auto; border: 0; width: 75px; max-width: 100%;"
                        width="75">
                </div>
            </td>
        </tr>
    </table>
    <table
        class="paragraph_block block-3"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
        <tr>
            <td
                class="pad">
                <div
                    style="color:#000000;direction:ltr;font-family:Fisker-Bold,Arial, Helvetica, sans-serif;font-size:16px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:center;mso-line-height-alt:19.2px;">
                    <div
                        style="margin: 0;">
                        <b>Service Appointment</b>
                </div>
                </div>
            </td>
        </tr>
    </table>
    <table
        class="paragraph_block block-4"
        width="100%"
        border="0"
        cellpadding="0"
        cellspacing="0"
        role="presentation"
        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
        <tr>
            <td class="pad"
                style="padding-top:10px;padding-bottom:5px;">
                <div
                    style="color:#000000;direction:ltr;font-family:Fisker-Regular,Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:120%;text-align:center;mso-line-height-alt:19.2px;">
                    <p
                        style="margin: 0;">
                        [Service Appointment Date]
                    </p>
                </div>
            </td>
        </tr>
    </table>
</td>

解决方案 #

Outlook移动端对CSS的支持有特殊性，仅靠外部或内部的display: block类可能无法生效，必须结合Outlook专属条件注释和高优先级样式来处理：

1. 优化CSS规则，添加Outlook专属样式 #

在邮件的<head>中添加以下样式，同时用条件注释确保只有Outlook识别：

@media only screen and (max-width: 480px) {
    .stack .column {
        width: 100% !important;
        display: block !important;
        float: none !important;
        clear: both !important;
    }
}

<!--[if mso]>
<style>
    .stack .column {
        width: 100% !important;
        display: block !important;
    }
</style>
<![endif]-->

2. 修改HTML结构，增强兼容性 #

给列的<td>标签添加内联的max-width属性，并通过条件注释重置Outlook的表格布局：

<!-- 包裹列的父容器 -->
<table class="stack" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <!--[if mso]>
        <td width="100%" role="presentation">
        <table width="100%" role="presentation">
        <tr>
        <![endif]-->

        <td class="column column-1"
            width="50%"
            style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border: 0; max-width: 100%;">
            <!-- 原有列内容 -->
        </td>

        <td class="column column-1"
            width="50%"
            style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border: 0; max-width: 100%;">
            <!-- 原有列内容 -->
        </td>

        <!--[if mso]>
        </tr>
        </table>
        </td>
        <![endif]-->
    </tr>
</table>

3. 关键注意点 #

• Outlook移动端依赖MSO专有属性，普通CSS选择器优先级不足，必须用!important强制生效
• 条件注释<!--[if mso]>会被所有Outlook客户端识别，包括移动端，能确保布局规则被正确应用
• 保留媒体查询可兼容其他邮件客户端的移动端渲染，避免出现样式冲突

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