海龙国际｜技术部
邮件会过滤或重写CSS怎么办？
最近在做营销邮件，发现做好调试的html页面在页面上打开是正常的，但是在邮箱里面打开看就是样式会错乱，这是什么回事呢？
原来啊， 邮件会过滤或重写CSS的。那怎么办呢？
邮件样式与网页样式差异大的主要原因：
核心原因
邮件客户端限制：主流邮箱（Gmail、Outlook、Apple Mail等）对HTML/CSS支持有限且不统一，它们会过滤或重写CSS来保证安全性。
常见不支持的特性
1. CSS限制
html
<!-- 这些通常不支持或部分支持 --> <style>标签部分内容会被过滤 position: absolute/fixed float flexbox/grid（部分客户端） background-image（部分客户端） @font-face外部字体 margin/padding（Gmail可能忽略）
2. 布局限制
必须使用<table>布局（兼容性最好）
避免<div>布局
内联CSS是必须的（重要样式写在style属性里）
3. 推荐解决方案
A. 使用表格布局
html
<table width="600" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding: 20px; background: #f5f5f5;"> 内容在这里 </td> </tr> </table>
B. 内联所有CSS
html
<!-- 外链或<style>可能被过滤 --> <p style="color: #333; font-size: 14px; line-height: 1.5;"> 文字内容 </p>
C. 使用邮件开发框架
MJML - 邮件专用标记语言
Foundation for Emails
Email on Acid（测试工具）
D. 关键技巧
html
<!-- 重置样式 --> <table role="presentation" cellspacing="0" cellpadding="0" border="0"> <!-- 确保图片显示 --> <img src="..." style="display: block; max-width: 100%;"> <!-- 安全字体 --> font-family: Arial, sans-serif; <!-- 固定宽度 --> width="600" style="width: 600px;"
测试建议
多客户端测试：Litmus, Email on Acid
降级设计：假设CSS大部分不支持
移动端适配：使用响应式表格
文字版本：始终提供纯文字备用
2026-01-09
浏览18
登录后评论
评论
分享