為什麼 EDM 會跑版？

行銷部的小美花了兩小時用 Canva 做好一封精美的母親節促銷信，滿意地按下「發送」。結果客戶用 Outlook 打開，圖片歪了、文字疊在一起、按鈕消失了。老闆用 Gmail 打開，版面又不一樣。

你是不是也遇過這種狀況？這不是你的錯——Email 的世界跟網頁完全不同。

Email 不是瀏覽器

你平常看到的網頁，是用 Chrome、Safari 這類「現代瀏覽器」渲染的。這些瀏覽器支援最新的 CSS 技術：flexbox、grid、float 排版都沒問題。

但 Email 不一樣。Email 是用「郵件客戶端」顯示的，每個客戶端有自己的渲染引擎：

沒錯，Outlook 用 Microsoft Word 的引擎來渲染 HTML Email。這就是為什麼你的漂亮版面在 Outlook 裡會爆炸。

這些 CSS 在 Email 裡「不能用」

在現代網頁中很常見的排版方式，在 Email 裡幾乎全軍覆沒：

那怎麼辦？用 Table！

既然現代排版都不能用，Email 的世界回到了 1999 年的做法：用 HTML Table 排版。

Table（表格）本來是拿來放數據的，但它有一個超棒的特性：幾乎所有郵件客戶端都完整支援 Table。

用 <table>、<tr>（列）、<td>（格子）就能做出穩定的多欄排版。

來看看差異

div 版（網頁思維，Email 裡會跑版）

在瀏覽器裡，上面的 flex 排版會正常顯示兩欄。但寄到 Outlook，兩個商品會疊在一起變成一欄。

Table 版（Email 思維，到處都能用）

看起來結果一樣？但 Table 版在 Outlook、Gmail、Apple Mail 裡全部正常顯示。

EDM 排版的三大原則

記住這三條，你的 EDM 就不會跑版：

1. 用 Table 排版，不用 div + CSS 排版
2. 用 inline CSS（寫在標籤上的 style="..."），不用外部 CSS 或 <style> 標籤
3. 用安全的 CSS 屬性，避免不支援的屬性

接下來的課程，我們會一步步學會這些技巧。

AI 協作：學了這個，跟 AI 怎麼配合？

現在你知道 Email 排版跟網頁排版的差異了。當你請 AI 幫忙做 EDM，一定要加上關鍵提示。

你的人類優勢：

• 你知道要跟 AI 強調「這是 Email，不是網頁」
• 你能判斷 AI 生成的 EDM 是否用了不安全的 CSS

可以這樣跟 AI 說：

幫我做一封電商促銷 Email 的 HTML，要用 table-based layout，所有 CSS 都要 inline，不要用 flexbox 或 grid，因為 Outlook 不支援。

練習題