Outlook桌面及移动端HTML邮件指定代码不显示问题求助

问题根源分析 #

你的代码存在几个导致Outlook渲染异常的关键点：

1. 内联样式width: 50 !important缺少单位（px），Outlook桌面版不识别无单位的长度值，会直接忽略该样式
2. 空<td>元素在Outlook中易被压缩或隐藏，因为Outlook对空元素的渲染逻辑比其他邮箱更严格
3. 未添加Outlook专属的高度强制渲染属性，导致高度无法正常生效

修复后的代码 #

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCodeBlock">
    <tbody class="mcnTextBlockOuter">
        <tr>
            <td valign="top" class="mcnTextBlockInner">
                <br>
                <table class="orange-line" cellspacing="0" cellpadding="0" border="0" width="50" align="center" style="width: 50px !important;">
                    <tbody>
                        <tr>
                            <td class="orange-line" align="center" valign="top" width="50" height="2" style="background-color: #fa5528; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 2px; font-size: 1px;">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                <br>
            </td>
        </tr>
    </tbody>
</table>

关键修改说明 #

• 补全宽度单位：将width: 50 !important改为width: 50px !important，同时把table和td的width="75px"统一调整为50（与内联样式匹配）
• 给空td添加占位符：在<td>内加入 ，避免Outlook将其识别为空元素而隐藏
• 强制高度渲染：设置line-height: 2px和font-size: 1px，确保Outlook能正确渲染出指定高度
• 统一宽高属性：将html属性width和height改为无单位数值，提升Outlook下的兼容性

内容的提问来源于stack exchange，提问作者Séb2code