HTML邮件发送至Gmail后布局完全错乱的问题排查

你的邮件在Gmail中渲染错乱核心是3个问题，和div布局本身无关：

1. meta标签写法错误
   你将Content-Type编码声明和viewport响应式配置错误写在了同一个meta标签内，多数邮件客户端（包括Gmail）无法正确解析这个混写的标签，会直接忽略整个标签的配置，导致编码识别、响应式规则全部失效。
2. 核心布局使用了Gmail不支持的CSS属性
   你在根容器、内容块、图标排布模块大量使用了display: flex、display: grid及配套的flex/grid布局属性（flex-direction、align-items、grid-template-columns等）。目前Gmail（尤其是网页版、移动端非原生Gmail客户端）对flex的支持极不完善，对grid完全不支持，Gmail渲染邮件时会直接把这些不兼容的CSS属性从代码中剥离，所有元素退回默认文档流排布，直接导致布局完全错乱。

注意：公开资料提到的"2017年后主流客户端支持div布局"指的是支持div作为块级容器使用，不代表支持flex/grid这类现代CSS布局方案。HTML邮件的兼容生态和浏览器完全不同，截至2024年，没有任何一个主流邮件客户端能100%兼容flex/grid布局。

3. 在线测试工具结果不可靠
   你用的在线HTML邮件测试工具多数是用浏览器内核直接渲染HTML，没有模拟Gmail真实的CSS过滤、代码裁剪逻辑，因此显示正常，实际发信到Gmail后会经过Gmail的安全/兼容处理，才会暴露布局问题。

1. 首先修正meta标签，拆为两个独立标签：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2. 彻底替换所有flex/grid布局为HTML table嵌套布局，这是跨邮件客户端兼容的唯一稳妥方案：
   • 根容器居中不要用flex实现，给外层table加align="center"属性，该属性所有邮件客户端全兼容
   • 所有横向排列的内容（比如你排布的9个品牌图标），用table的<td>单元格实现列排布，不要用grid
   • 纵向排列的内容直接用块级元素（p、div、h标签）或者table的<tr>行实现即可
   • 所有flex/grid相关的CSS属性（flex-direction、align-items、justify-content、grid-template-*、gap等）全部删除，不要保留
3. 补充兼容必备属性：
   • 所有img标签同时加HTML原生的width、height属性和inline样式的宽高声明，避免图片加载前布局塌陷，同时给img加style="display:block"消除图片默认的3px底部间隙
   • 核心布局样式全部写在元素的inline style中，不要只依赖head标签内的样式，Gmail部分场景会裁剪head内的样式
   • 媒体查询可以保留作为移动端渐进增强的配置，但必须保证删除所有媒体查询后，桌面端核心布局能正常显示
4. 测试时不要只依赖在线模拟工具，最终验证必须用真实Gmail账号收信查看。

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