GMX邮件模板图片溢出div 如何保障设计一致性

GMX邮件客户端的渲染引擎对Web标准CSS支持存在较多裁剪，尤其是对div容器的溢出约束、图片默认尺寸的解析逻辑和主流客户端存在差异，直接使用常规div布局写邮件模板，很容易出现图片撑破容器、内容重叠的问题，按以下规则调整即可保证渲染效果和设计一致：

• 给所有图片加双重尺寸约束
  不要仅依赖外层容器限制图片尺寸，所有<img>标签必须同时声明HTML原生的width、height属性，再搭配内联样式做自适应兜底，写法参考：

  <img src="图片资源地址" width="600" height="250" style="display:block; max-width:100%; height:auto; border:0; margin:0; padding:0;" />
  

  禁止给图片添加float浮动属性，GMX对浮动的渲染存在已知bug，是引发出位重叠的高频原因。

• 外层容器改用表格布局替代纯div结构
  邮件模板跨客户端兼容性最优的方案始终是table布局，将原本包裹图片的div替换为table单元格：给<table>标签声明固定宽度、添加border-collapse: collapse;内联样式；给<td>标签添加overflow: hidden; word-break: break-all;内联样式，从结构层面锁死内容区域尺寸。注意不要仅靠div的width、overflow属性控制范围，GMX会直接忽略div上的部分溢出约束规则。

• 添加GMX适配的样式兜底
  在模板头部的<style>标签中添加以下重置规则，覆盖GMX的默认渲染样式，注意不要依赖外部样式表，GMX会直接过滤外部引入的CSS资源：

  img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    max-width: 100% !important;
  }
  div, p, td {
    max-width: 100%;
    overflow: hidden;
  }
  

• 高频避坑清单

  • 不要给模板内元素使用position: relative/absolute定位属性，GMX对定位的解析逻辑混乱，极容易引发元素错位、重叠
  • 容器宽度计算要包含边框、内边距尺寸，不要出现元素宽度超出模板总设计宽度的情况，例如设计总宽600px的模板，内部所有元素的实际占位宽度不能超过600px
  • 不要使用object-fit属性控制图片缩放，GMX不支持该属性，会导致图片按原始尺寸加载直接撑破容器

以上方案经过GMX网页端、桌面客户端多版本实测，调整后不会再出现图片溢出、内容重叠问题，渲染一致性可以覆盖绝大多数用户使用场景。

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