Windows 10端Outlook邮件右侧多余空白问题排查求助

问题根源 #

Windows版Outlook采用Word的HTML渲染引擎，和网页/移动端的标准渲染逻辑差异极大，对CSS自适应属性（如max-width）支持不完善。结合你的代码，具体问题点如下：

• 图片同时设置了HTML固定宽度width="600"和CSSmax-width:100%，Outlook会优先识别HTML固定宽度，当外层容器宽度计算出现偏差时，图片宽度会撑出容器，导致右侧留白。
• 底部footer表格硬编码了width:600px，嵌套在同样600px宽的外层表格中，Word引擎计算嵌套表格时会产生误差，导致整体宽度超出预期。
• 未添加Outlook专属的条件注释样式，无法强制Word引擎按预期宽度渲染元素。

修复步骤 #

1. 添加Outlook专属强制宽度样式 #

在现有<style>标签内插入针对Outlook的条件注释样式，覆盖Word引擎的默认规则：

<!--[if mso]>
<style type="text/css">
.container1, .container2 {
    width: 600px !important;
}
img {
    width: 600px !important;
    height: auto !important;
}
</style>
<![endif]-->

2. 统一表格宽度设置 #

将footer表格的width:600px改为width:100%，继承外层容器宽度，避免硬编码导致的宽度冲突：

<table class="container2" style="width: 100%; background-color: #d3d3d3;" border="0" cellspacing="0" cellpadding="0">

3. 优化图片宽度属性 #

保留图片的HTMLwidth="600"属性，同时添加CSSwidth:100%，兼顾自适应需求和Outlook渲染规则：

<img style="max-width: 100%; width: 100%; height: auto; display: block; margin: 0 auto;" src="https://via.placeholder.com/600x118.png" border="0" alt="" width="600" height="118" />

4. 替换不稳定的align属性 #

将图片的align="center"替换为CSSmargin:0 auto，避免Outlook渲染时出现布局偏移。

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