FoundationforEmails使用Inky语法生成表格，经Gulp构建内联CSS并处理客户端兼容性。邮件模板必须依赖table布局与内联样式，避免现代CSS特性，以兼容Outlook等老旧客户端。
如何使用CSS框架Foundation构建邮件模板
作者：技术拾光
时间：2026-07-27
浏览：175
首先需要明确一点：直接使用现代 CSS 框架（如 Tailwind、Bootstrap）编写邮件模板，99% 会失败——不是样式丢失，就是布局坍塌，尤其在 Outlook 和 Gmail 这两个老大难中。Foundation for Emails 本质上不是一套“CSS 框架”，而是一套专门与邮件客户端斗智斗勇的构建体系。其核心思路是：利用 Inky 抽象语法生成老旧客户端能识别的表格结构，再通过 Gulp 将 CSS 内联并处理各类差异。不要指望直接使用 foundation.css 就能过关——那是不存在的。
许多刚接触邮件开发的人会问：为什么不能像写网页那样写邮件？答案很简单：邮件客户端（Outlook Desktop、iOS Mail、Gmail App）根本不识别现代 CSS 特性。 根本原因在于：邮件客户端的渲染引擎仍然停留在二十年前。Foundation 提供的样式必须通过构建工具内联到每个标签上，否则就是一堆废代码。而且它对 这些标签看起来像 HTML 原生组件，但实际上不是——它们是 Inky 模板语言中自定义的组件。编写时使用 Inky 语法，编译时 Gulp 配合 Inky 将它们转换成一层层嵌套的 实际输出是一串带有 这里需要特别提醒： 邮件开发中最常见的坑是什么？就是使用 标题文本 正文内容 这段代码编译后会变成一个空的 很多人写完 Inky 模板（.html）就直接往邮件客户端中发送，结果自然是全军覆没。正确的做法是运行 跳过这一步直接发送源码 .html 的结果是：所有样式失效，Inky 标签原样暴露，客户端直接将其当作垃圾丢弃。这些坑都是前人踩过的，必须重视。 归根结底，邮件开发的难点不在于写代码，而在于接受一个事实：你写的不是网页，而是给一堆二十年前的渲染引擎喂它们能识别的内容。Foundation 的价值不在于语法多么简洁，而在于它把已知的坑都预先填好了——老老实实使用它的管道，不要绕过 Gulp、不要硬塞现代 CSS、不要手写表格，就能稳住 90% 的客户端表现。 绿化、压缩、噪点和虚拟水印，自由调节做旧程度。 选择画质和输出格式，预览压缩前后的大小。flex、grid、@media 查询？部分支持但行为异常；外部 标签？几乎全部被忽略。Foundation for Emails 的 foundation-emails.css 经过特殊加工——所有样式最终必须内联到 HTML 元素上，并且大量使用 table/td 布局来模拟响应式效果。直接向页面中插入 ，大部分客户端会直接丢弃整段样式；手写 margin/padding，Outlook 要么忽略要么算错，间距完全失控；使用 尝试排两栏布局？最终渲染出来就是一个光秃秃的 ，什么也没有。
为什么不能直接使用 foundation.css ？
table 布局的依赖已经到了偏执的程度——只有这样才能在 Outlook 中保证基本的对齐效果。
→ 大部分客户端直接丢弃整段样式margin/padding → Outlook 会忽略或计算错误，导致间距失控 → 渲染成无意义的 ，布局完全失效
结构。例如下面这段代码：
width、align、cellspacing 等属性的表格嵌套，确保在 Outlook 中也能按比例渲染。关键点需要明确：
small="12" 对应手机端占满宽度，large="6" 对应桌面端占一半——这些值最终转换为 width="100%" 或 width="50%" 的
display: none/block 控制，但仅对支持 @media 的客户端生效（Gmail Web 支持，Outlook 不支持） 嵌套，是因为 Inky 已经将兼容性最佳实践固化，例如强制使用
mso-line-height-rule: exactly 修复 Outlook 行高问题
small 和 large 的值并不是任意的，它们对应 Foundation 预设的栅格系统（12列）。编写之前最好熟悉这套规则，否则很容易出现“手机端两栏挤在一起”的问题。使用
margin 和 paddingstyle="margin-bottom: 20px" 来分隔段落。结果呢？Outlook 直接忽略，Gmail 渲染得奇奇怪怪。正确的做法是使用 Foundation 提供的 td 的 height 属性控制。所有客户端都识别这个，不会出现兼容问题。
size-sm="16" + size-lg="32" 可以实现响应式间距，但注意：Outlook 不识别 max-width 或媒体查询，因此 size-sm 在它身上无效，只能依靠基础 size 保底Gulp 构建流程不可跳过
npx grunt build 或 gulp build，触发一套完整的构建流程：
calc()、var() 等不兼容语法）inline-css 插件将样式逐个注入到 、
等标签的 style 属性中
等 Inky 标签转换为真实的 HTML 表格结构 等 iOS 专用修复实用工具推荐
电子包浆使用 ›图片压缩使用 ›