Outlook渲染HTML邮件出现多余间隙、表格背景色失效问题求助

Outlook 渲染异常修复方案 #

你遇到的间隙、背景色失效问题均为Outlook对HTML/CSS支持能力不足导致的，可通过以下针对性修改解决：

1. 消除图片默认间隙：Outlook会给图片自动添加默认边距与行高，所有<img>标签需要添加display:block等兼容样式
2. 双重声明背景色：所有设置背景色的位置，同时使用bgcolor属性和内联background-color样式，覆盖Outlook不同版本的识别规则
3. 新增Outlook专属表格属性：添加mso-table-lspace、mso-table-rspace和border-collapse属性，彻底消除表格默认间隙
4. 空单元格优化：用于占位的空td添加font-size:0;line-height:0样式，避免空格自带的行高撑开多余高度

修复后完整代码

<table class="responsive-table" border="0" cellspacing="0" cellpadding="0" align="center" width="650" bgcolor="#ffffff" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <a href="" target="_blank">
                    <img src="picto-Certifie-BIO.png" alt="Certifie BIO" width="100" height="100" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" />
                </a>
            </td>
            <td width="15" bgcolor="#ffffff" style="background-color: #ffffff;font-size:0;line-height:0;">&nbsp;</td>
            <td align="center" valign="top">
                <a href="" target="_blank">
                    <img src="picto-Anti-gaspi.png" alt="Anti gaspi" width="100" height="100" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" />
                </a>
            </td>   
            <td width="15" bgcolor="#ffffff" style="background-color: #ffffff;font-size:0;line-height:0;">&nbsp;</td>
            <td align="center" valign="top">
                <a href="" target="_blank">
                    <img src="picto-Clean-et-naturel.png" alt="Clean et naturel" width="100" height="100" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" />
                </a>
            </td>
            <td width="15" bgcolor="#ffffff" style="background-color: #ffffff;font-size:0;line-height:0;">&nbsp;</td>
            <td align="center" valign="top">
                <a href="" target="_blank">
                    <img src="Picto-Fait-en-France.png" alt="Fait en France" width="100" height="100" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" />
                </a>
            </td>
        </tr>
    </tbody>
</table>

额外注意事项

• HTML邮件所有样式必须写内联，Outlook几乎不支持<head>内的样式表
• 不要使用浮动、Flex、Grid这类现代布局，全部用嵌套表格实现排版
• 尺寸单位统一使用px，避免相对单位被Outlook错误识别

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