Elysia Tools
导航
Development
检查邮件 HTML 模板的客户端兼容性:不支持 flex/grid、未内联 CSS、Outlook Word 渲染陷阱、表格布局问题、无障碍缺失。覆盖 Gmail/Outlook/Apple Mail 等主流客户端的已知限制。
详情
在发送前发现只在 Outlook、Gmail、Apple Mail 中才暴露的 HTML 邮件 bug。
为什么邮件 HTML 不一样。 邮件很大程度上仍是 1990 年代的 HTML,由不一致的引擎渲染:Outlook 桌面版用 Microsoft Word 渲染 HTML(没错,真的),Gmail 剥除大部分 <style> 块,Apple Mail 最宽容但仍古怪。Flexbox、grid、position: fixed 在多数客户端失效。基于表格的布局不是怀旧——它是可靠的默认。
检查器检查什么。 不支持的 CSS(flex/grid/position)、未内联 CSS、Outlook 陷阱(缺 MSO 条件注释/VML)、表格布局基本功(role/cellpadding)、图片(缺 alt/width)、无障碍与可达性(缺 lang、低对比度、表单/script)。
严重级别。 🔴 Error(主流客户端会坏)、🟡 Warning(跨客户端不一致)、🔵 Info(最佳实践/无障碍)。严格度:Strict 也显示 info;Lenient 只标 error 和最有影响的 warning。
局限。 这是静态规则检查器——无法在真实客户端运行。像素级 QA 请配合 Litmus 或 Email on Acid 等渲染服务。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
邮件 HTML 检查器是一款专为邮件模板设计的兼容性检测工具。它能够快速扫描您的 HTML 代码，识别在 Outlook、Gmail 和 Apple Mail 等主流客户端中可能导致排版错乱的现代 CSS 属性（如 flex 和 grid）、未内联的样式、缺失的表格属性以及无障碍设计缺陷，帮助您在发送前规避渲染风险。
背景
正在为公司设计一份新的电子周报，使用了现代的 Flexbox 布局来排列多栏内容。
问题
在 Outlook 桌面版测试时，多栏内容全部垂直堆叠，排版完全崩溃。
如何使用
将邮件 HTML 代码粘贴至检查器中，将严格度设为“平衡”并运行检测。
输入参数：HTML 代码中包含 <div style="display:flex;">，严格度设为 balanced。结果
检查器精准指出 display:flex 在 Outlook 中不受支持，并提示将其重构为基于 <table> 或 inline-block 的传统布局。
背景
设计了一款精美的节日促销邮件，但发送后发现 Gmail 手机客户端上的字体和背景颜色全部丢失。
问题
所有的样式都写在 <head> 的 <style> 标签内，被 Gmail 客户端直接剥离。
如何使用
将 HTML 源码输入检查器，选择“严格”模式进行扫描。
输入参数：HTML 代码的 <head> 中包含大量样式规则，严格度设为 strict。结果
检查器发出警告，指出未内联的 CSS 样式在 Gmail 中存在丢失风险，并建议将关键样式直接内联到 HTML 标签中。
Outlook 桌面版使用 Microsoft Word 引擎渲染 HTML，不支持 Flexbox、Grid 和绝对定位等现代 CSS 布局，必须使用传统的表格（Table）进行排版。
许多邮件客户端（如移动端 Gmail）会直接剥离 `<head>` 中的 `<style>` 标签，只有将样式直接写在元素的 `style` 属性中才能保证稳定渲染。
“严格”会显示所有级别（包括无障碍提示）的问题；“平衡”过滤掉低风险提示；“宽松”则仅标记会导致严重排版破损的错误和核心警告。
本工具是静态规则检查器，无法进行真实客户端的像素级渲染预览。如需真实截图，建议配合 Litmus 或 Email on Acid 等服务。
该属性告诉屏幕阅读器此表格仅用于布局而非数据展示，从而提升邮件的无障碍可读性，避免干扰视障用户的阅读体验。