Outlook桌面端正常显示的HTML图片邮件在移动端不显示的问题排查

问题根源 #

你的代码存在两个核心问题导致Outlook移动端无法显示图片：

1. 非MSO分支HTML结构错误：<tr>标签直接包裹<div>，违反HTML表格语法规范（<tr>内必须嵌套<td>），移动端邮件客户端解析时会出现异常。
2. Outlook移动端兼容性：Outlook移动端（iOS/Android）不支持VML，会自动走非MSO分支，但分支内的结构错误导致渲染失败。原<![if mso]>仅覆盖桌面端Outlook（基于Word渲染引擎），无法影响移动端。

修复后的完整代码 #

<!--[if mso]>                    
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position: relative; width: 700px; height: 170px;">
    <v:fill type="tile" src="https://www.w3schools.com/images/lamp.jpg" />
    <v:textbox style="v-text-anchor:bottom" inset="0,0,0,0">
        <div style="position: relative; text-align: left;">
            <font color="#ffffff">
                <div style="padding: 20px; font-family: Georgia, serif; font-size: 50px;">
                    <p style="color: white; margin: 0;">&nbsp;&nbsp;Image Title</p>
                </div>
            </font>
        </div>                                            
    </v:textbox>
</v:rect>
<![endif]-->

<!--[if !mso]><!-->
<tr>
    <td style="padding:0; margin:0;">
        <div style="padding:0; margin:0; position:relative; font-size:14px; display:block; max-width:100%;">
            <img class="adapt-img" src="https://www.w3schools.com/images/lamp.jpg" alt="Image Title" title="Image Title" width="560" style="display:block; width:100%; height:auto; max-width:560px;">
            <p style="position: absolute; bottom: 20px; left: 20px; color: white; font-size: 50px; margin:0; font-family: Georgia, serif;">&nbsp;Image Title</p>                     
        </div>
    </td>
</tr>
<!--<![endif]-->

关键修复说明 #

• 修正表格结构：在非MSO分支的<tr>内添加<td>，符合HTML邮件的严格语法要求，确保移动端客户端能正确解析。
• 优化图片样式：给图片添加display:block; width:100%; height:auto;，保证图片在移动端自适应显示，同时补充完整的alt和title属性，提升可访问性。
• 调整文字定位：将文字层的bottom值从-30px改为20px，避免文字被截断或超出图片范围，同时消除段落默认边距。
• 修复VML标签闭合：原桌面端VML代码中<font>标签未闭合，修复后确保桌面端Outlook渲染正常。

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