嵌入HTML文件时邮件忽略部分CSS的原因及正确显示方案咨询

1. 所有样式必须内联 #

邮件客户端基本不认<style>标签里的类选择器、ID选择器，哪怕写了也会被过滤。必须把样式直接写在元素的style属性里：

<!-- 错误写法 -->
<style>
  .content { padding: 10px; color: #666; }
</style>
<div class="content">正文内容</div>

<!-- 正确写法 -->
<div style="padding: 10px; color: #666; margin: 0;">正文内容</div>

样式多的话，自己写个小脚本批量转内联，别依赖在线工具。

2. 放弃HTML5属性，用传统替代方案 #

像hidden这类HTML5属性，绝大多数邮件客户端都不支持，得用CSS兜底：

• 隐藏元素：直接写style="display: none !important; visibility: hidden; height: 0; width: 0; font-size: 0; line-height: 0;"，多写几个属性防止客户端忽略。
• 布局别碰Flex、Grid，老老实实嵌套<table>，这是邮件布局的通用兼容方案，所有客户端都认。

3. 砍掉复杂CSS特性 #

别用后代选择器、伪类（比如:hover），也别用CSS3的圆角、阴影、渐变——除非你只针对Gmail、苹果邮件这种现代客户端，否则大概率会失效。

4. 多客户端测试是必须的 #

写完后一定要在Outlook（桌面版+网页版）、Gmail、苹果邮件、国内主流邮箱里测，每个客户端的规则都不一样，比如Outlook桌面版连margin都可能不认，得用表格的cellpadding、cellspacing替代。

5. 发送环节的细节 #

• 发送时选纯HTML格式，别搞HTML+纯文本双格式，避免客户端自动降级成纯文本。
• 绝对不能加JavaScript，所有邮件客户端都会直接禁用。
• 图片要加alt属性，并且把width、height用内联属性写死，路径确保收件人能访问到。

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