为什么邮件模板中已转内联的div和样式仍不生效？

相关信息 #

• 对应代码预览地址：https://codepen.io/yahyajapan/pen/bGgyONX

实际遇到的问题 #

• 开发初期编写的邮件模板内部CSS完全不生效
• 按照邮件模板开发规范，将内部CSS全部转换为内联样式后，发送测试邮件发现页面内的div元素及对应样式全部无法正常显示，达不到预期效果
• 同一段代码直接在浏览器中运行，可正常展示预期的页面效果

样式失效、元素不显示的核心原因 #

• 使用了大量主流邮件客户端不兼容的CSS属性
  • Flex布局属性（display: flex、justify-content: space-between）：Outlook全系列、国内主流QQ邮箱、网易邮箱等桌面端客户端完全不支持Flex布局，这类声明会被直接忽略，连带布局内元素出现位置错乱、尺寸异常的问题
  • 绝对定位属性（position: absolute）：除少数移动端邮箱外，绝大多数桌面端邮箱会直接过滤所有定位相关样式，依靠定位实现的页脚浮层元素会出现错位、甚至被裁剪不显示的问题
  • 自定义字体声明（font-family: oswald-light、oswald-regular、nunito）：邮件环境不支持外部字体资源加载，这类自定义字体声明会被直接丢弃，页面文字会显示为收件方邮箱的默认字体
• HTML结构不符合邮件模板的兼容解析规则
  • 最外层用<center>标签做容器，没有按照邮件模板通用规范用Table结构做全页面包裹，部分严格遵循HTML邮件解析规则的客户端，会直接过滤掉非Table结构的外层容器，连带内部嵌套的所有div、table元素一起不渲染
  • 核心内容区块全部用div嵌套实现，没有用邮件兼容度最高的Table+td结构替代div做布局，很多客户端会默认剥离div标签上的样式，甚至直接不渲染div包裹的内容
• 内联样式转换存在遗漏和错误
  • 出现重复属性声明（比如同一个table标签上连续写了两次border-spacing: 0），部分严格的解析器会直接判定样式非法，整块忽略对应元素的所有样式
  • 多个div标签上只保留了class名称，没有把原本内部CSS定义的尺寸、边距样式补成内联形式，这类元素被解析后没有任何可计算的尺寸，高度被压缩为0，视觉上就和“元素完全不显示”的效果一致

适配调整方向 #

• 所有核心布局全部替换为Table嵌套结构，不要使用div作为布局容器
• 完全剔除Flex、定位这类邮件不兼容的CSS属性，需要左右分栏的场景直接通过Table的两列td实现布局
• 所有样式全部以inline形式写在对应标签的style属性中，不要依赖class选择器、内部CSS定义样式
• 所有自定义字体替换为邮件通用的安全字体栈，比如font-family: Arial, Helvetica, sans-serif

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