HTML邮件模板在Outlook中同时显示VML与HTML内容的问题求助

问题原因 #

你的代码存在表格结构错误：在<tr>标签内直接放置了VML代码块，之后又添加了一个<td>标签。Outlook采用的MSHTML引擎会将VML内容解析为<tr>下的独立内容，同时渲染后续<td>里的常规HTML，导致两者同时显示。此外，你未对非Outlook客户端的HTML内容做针对性隐藏，Outlook会同时加载VML和常规HTML两部分内容。

修复后的代码 #

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<noscript>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</noscript>
<![endif]-->
<style>
    table, td, div, h1, p {font-family: Georgia, sans-serif;}
</style>
</head>
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
    <tr>
    <td align="center" style="padding:0;">
        <table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
        <tr>
            <!--[if mso]>
            <td align="center" style="padding:40px 0 30px 0;">
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position: relative; width: 1100px; height: 170px;">
                    <v:fill type="tile" src="https://www.google.se/images/srpr/logo4w.png" />
                    <v:textbox style="v-text-anchor:bottom" inset="0,0,0,0">
                        <div style="position: relative; text-align: center;">
                            <font color="red">
                                <div style="position: absolute; bottom: 0; left: 0; padding: 20px;font-family: Georgia, serif; font-size: 50px;">
                                    <p>&nbsp;My VML Text Here!</p>
                                </div>
                            </font>
                        </div>
                    </v:textbox>
                </v:rect>
            </td>
            <![endif]-->
            <!-- Fallback for non-Microsoft email clients -->
            <!--[if !mso]><!-->
            <td align="center" style="padding:40px 0 30px 0;">
                <div style="position: relative; text-align: center;">      
                    <img src="https://www.google.se/images/srpr/logo4w.png" alt="" width="1100" style="height: 170px;display:block;" />
                    <p style="position: absolute; bottom: 8px; left: 16px; color: red; font-size: 50px">My Regular Text Here!</p>
                </div>
            </td>
            <!--<![endif]-->
        </tr>
        </table>
    </td>
    </tr>
</table>
</body>
</html>

关键修复点 #

• 将VML代码包裹在<td>标签内，确保表格结构合法，Outlook能正确识别为表格单元格内容。
• 给非Outlook的HTML内容添加<!--[if !mso]><!-->和<!--<![endif]-->条件注释，让Outlook忽略这部分内容，只渲染VML对应的<td>。

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