先建立共識：Email 為什麼那麼難搞？

Email 客戶端不是瀏覽器。它們通常以「安全」與「相容」為最高優先，會主動做很多事情：

• 移除風險標籤與 CSS：例如某些 style、class、甚至整段 head 可能被剝掉。
• 限制外部資源：圖片預設不載入、字體無法外掛、追蹤參數被重寫。
• 渲染引擎碎片化：同一封信在 Gmail、Outlook、Apple Mail 的表現可能完全不同。
• 深色模式自動改色：背景、文字、按鈕顏色可能被系統「好心」調整。

所以你看到的「按鈕不見」或「格式跑掉」，多半不是單一錯誤，而是多個限制疊加的結果。排錯要抓到最可能的原因，逐步驗證。

一、按鈕不見或變成純文字：最常見 8 大原因

1) 你用的是「div + a + CSS」按鈕，但客戶端把 CSS 移除了

很多人用網頁思維做按鈕：外層 div 設背景色、padding、border-radius，裡面放 a 連結。問題是 Email 客戶端常會移除 class、刪掉 head 裡的 CSS，甚至不完整支援某些屬性，結果看起來就像「按鈕消失」或「只剩連結文字」。

對策：用「table-based button」做法，並把關鍵樣式直接寫在 style="" 的 inline CSS 上；同時避免依賴複雜選擇器或外部樣式表。

2) 你用了背景圖或漸層，結果被 Outlook / 客戶端忽略

Outlook（特別是 Windows 桌面版）常被認為是 HTML Email 的最大 Boss，因為它使用 Word 的渲染引擎，很多 CSS 不吃：背景圖、圓角、漸層、陰影都可能失效。你以為按鈕在那裡，其實只是背景沒畫出來，視覺上像「不見」。

對策：用純色背景當基本方案，漸層當加分；必要時針對 Outlook 使用 VML（進階作法），或接受 Outlook 顯示較樸素但可點擊。

3) 你把按鈕放在 display:flex / grid 的容器裡

在網頁上用 flex 置中、左右排列很自然，但許多 Email 客戶端對 flex/grid 支援不完整，會導致區塊換行錯誤、寬度計算錯誤，按鈕可能被擠出畫面外，或被壓到看不到。

對策：Email 版型優先使用 table、tr、td 做欄位與置中。不要假設 flex 一定能用。

4) 你用 margin 來做間距，但某些客戶端不吃

不少 Email 客戶端對 margin 的支援很詭異，尤其是垂直 margin、或套在某些元素上時會被忽略。結果按鈕上下被擠在一起、或區塊高度變 0，看起來像「消失」。

對策：用 padding 取代 margin；需要間距就用 table spacer（空的 tr/td）或在 td 上用 padding。

5) 連結被安全系統重寫，造成樣式或結構破壞

某些公司郵件閘道、反釣魚系統，會把所有連結改成安全跳轉網址（URL rewriting）。如果你把按鈕 HTML 寫得很極限（例如把整段都包在 a 裡、或巢狀結構不合法），重寫後就容易破版，甚至變成不可點。

對策：保持 HTML 結構合法、避免怪異巢狀、按鈕區塊盡量簡潔；連結使用完整 https，避免奇怪字符。

6) 字體大小或行高被客戶端重新計算，導致按鈕高度崩壞

按鈕通常靠 padding + line-height 撐高度。一旦客戶端改了預設字體、字距、行高，按鈕可能變矮、文字溢出、或整個按鈕區塊高度不對，看起來像「按鈕縮成一條線」。

對策：在按鈕文字的 td/a 上明確指定 font-size、line-height、mso-line-height-rule（對 Outlook 有幫助），並用 padding 撐出可點擊區。

7) 深色模式把背景變黑、文字也變黑，按鈕「看起來」像不見

深色模式常見災情：系統把淺色背景變暗、或把文字顏色覆寫，但你的按鈕文字顏色沒固定，導致背景跟文字顏色撞在一起，按鈕其實還在，只是對比消失。

對策：按鈕一定要固定背景色與文字色；必要時加上 border，並避免只靠陰影辨識。也要檢查 iOS Mail / Gmail App 的深色模式表現。

8) 圖片按鈕被擋、或圖片代理壓縮導致看起來像壞掉

有些人用「整張圖片當按鈕」。問題是很多客戶端預設不載入圖片，或透過代理服務載入（圖片會被改網址、壓縮、延遲）。如果圖片不顯示，按鈕就像消失。

對策：按鈕盡量用純 HTML/CSS 文字按鈕；若必須用圖，務必加上清楚的 ALT 文字與可點擊的文字備援。

二、排版跑掉：為什麼你在 Gmail 看起來正常，Outlook 卻崩？

排版問題通常集中在「欄位、寬度、對齊、字距、圖片」這幾類。下面是最常見的來源。

1) Outlook 的 Word 渲染引擎限制

Outlook 對很多 CSS 支援不好，尤其是：

• background-image、border-radius、box-shadow
• flex、grid、position
• 部分 padding/margin 行為不一致

對策：核心布局用 table；視覺效果以「可讀、可點」為底線，漂亮是加分。必要時準備 Outlook fallback（例如純色背景）。

2) 沒有固定內容寬度，導致手機或某些客戶端自動縮放

HTML Email 常用 600px 寬度作為桌面版的安全寬度。如果你沒有 outer container，或用了百分比寬但沒有上限，某些客戶端會把內容拉到全寬，導致圖片被放大、字變粗、欄位被擠壓。

對策：使用外層 table container 固定最大寬度，內部再做 RWD（通常靠 media query，但要接受某些客戶端不支援）。

3) 你用了太多 CSS shorthand，結果被部分解析錯誤

像是 margin: 0 auto 16px;、font: 14px/20px ... 這種 shorthand，在 Email 世界常被某些解析器吃錯，導致樣式只套到一半。

對策：把重要屬性拆開寫，尤其是 font、background、border、margin/padding 相關。

4) 圖片沒有寫 width/height 或 display:block，造成莫名其妙的縫隙

圖片下方出現一條白線、或左右有間距，常見原因是圖片被當成 inline 元素，跟文字基線對齊。

對策：圖片加上 style="display:block;border:0;outline:none;text-decoration:none;" 並明確指定寬度，避免自動縮放造成破版。

5) 你依賴 web font，但客戶端回退字型造成排版改變

很多 Email 客戶端不支援外掛字體，會回退到系統字型。不同字型的字寬不同，可能造成換行位置改變、行數變多、按鈕或卡片高度被撐爆。

對策：使用穩健的字型堆疊（例如針對繁體中文用常見系統字體），並確保 layout 不會因換行多一行就崩壞。

三、圖片不顯示或顯示很慢：其實是「預設策略」

你以為圖片壞了，但其實很多客戶端是「保守策略」：預設不載入外部圖片，避免追蹤像素與惡意內容。尤其是企業郵件環境更常見。

常見原因

• 收件者關閉自動載入圖片：需要手動點「顯示圖片」。
• 圖片是 http 非 https：容易被擋或被降級處理。
• 圖片主機回應慢：Email 客戶端會放棄載入或延遲很久。
• 圖片被代理（proxy）：URL 被改寫，快取或壓縮導致品質下降。

對策

• 所有圖片用 https。
• 圖片大小與檔案量要節制，避免一封信塞太多大圖。
• 重要訊息不要只放在圖片上，務必有文字版本。
• 替圖片加上清楚的 ALT，至少讓使用者知道原本要看什麼。

四、深色模式（Dark Mode）造成的「看起來壞掉」

深色模式不是單一規則，不同客戶端會用不同方式「自動改色」。常見災情包括：

• 背景被強制變深，但文字顏色沒跟著調整，導致閱讀困難。
• 按鈕背景被改色，文字仍用原本顏色，對比消失。
• 灰色分隔線在深色背景上幾乎看不到，整體層次消失。

實務對策

• 按鈕與重點文字一定要有明確顏色設定，不要依賴預設顏色。
• 對比要夠，必要時為按鈕加上 border 讓輪廓穩定。
• 避免用「很淡的灰」當成唯一分隔方式，深色模式容易被吃掉。
• 把深色模式當成必測項目，至少用 iOS Mail 與 Gmail App 看過一次。

五、你以為是排版問題，其實是「被安全機制處理」

除了 Email 客戶端本身，還有很多中間層會動你的信件：郵件閘道、反垃圾系統、企業防護平台、連結防釣魚服務。它們可能會：

• 重寫連結：所有 href 都變成安全跳轉。
• 插入警示：在信件上方或連結旁加入提示文字。
• 移除可疑屬性：例如某些 data-*、style、甚至部分標籤。
• 阻擋特定內容：例如太多短連結、太多追蹤參數、或特定關鍵字。

對策：把 Email 當成「在不受控環境播放的內容」，保持結構單純、避免過度花俏、不要堆滿追蹤與腳本思維。你要的是穩定送達與可讀可點。

六、最穩的 HTML Email 按鈕做法（概念層，不綁特定平台）

在 Email 世界，最穩的按鈕通常長這樣的原則：

• 用 table 包住按鈕，不要依賴 div 佈局。
• 樣式用 inline，尤其是背景色、padding、字體、顏色、圓角。
• 點擊區要大：手機好點，至少上下左右留足 padding。
• 提供 fallback：就算圓角或陰影失效，也應該看起來像按鈕。

如果你追求的是「在所有客戶端都漂亮」，你會很痛苦；但如果你把目標改成「在所有客戶端都清楚可讀、按得到、品牌一致」，成功率會大幅提高。

七、快速排錯流程：從哪裡開始查最快？

當你遇到按鈕不見或格式跑掉，建議用下面順序排查，效率最高：

1. 先確認是哪個客戶端壞：Gmail 網頁版？Gmail App？iOS Mail？Outlook 桌面版？不同答案對策完全不同。
2. 檢查 CSS 是否依賴 head / class：如果你主要樣式都在 head 或外部 CSS，先假設它會被剝掉。
3. 把布局改回 table：如果用了 flex/grid/複雜 div，先用 table 版本驗證是否穩定。
4. 檢查圖片與按鈕是否依賴背景圖：背景圖在 Outlook 常常直接失效。
5. 檢查深色模式：按鈕對比消失時，很多人誤以為按鈕不見。
6. 檢查連結是否被重寫：公司信箱特別常見，必要時拿原始信件原文比對。

很多人一開始就想「把 CSS 寫得更複雜」去救版面，結果反而更容易被客戶端剝掉。Email 排錯的核心是：回到更保守、更可預期的寫法。

八、寄出前的檢查清單（建議直接照做）

• 核心排版是否以 table 結構為主，而不是 flex/grid？
• 重要樣式是否都 inline（尤其是按鈕）？
• 圖片是否 https，且有 ALT，且有固定寬度？
• 按鈕是否有足夠對比（深色模式也要可辨識）？
• 連結是否使用完整網址，避免奇怪字符與過長參數？
• 文字內容是否在圖片看不到時仍能理解（不要只靠圖片傳達重點）？
• 是否至少測過 Gmail（網頁/手機）與 Outlook（桌面）？

當你把這份清單養成習慣，Email 的「不確定性」會少很多。你不需要把每封信做得像網頁那樣華麗，而是要做成在各種收件環境下都能穩定呈現的內容。

結語：Email 的美感，必須建立在可讀與可點之上

Email 的設計不是比誰 CSS 寫得炫，而是比誰在限制環境中依然能把訊息送達、把 CTA 保留下來、把閱讀體驗維持住。按鈕不見、排版跑掉，其實都是 Email 生態系的常態：客戶端限制、安全機制、深色模式、圖片策略、以及不同渲染引擎的差異，任何一個環節都可能影響結果。

最務實的做法是：把版型設計成「最保守也能成立」，再逐步加上加分效果。你的目標是讓收件人一打開就知道要做什麼、按哪裡、為什麼值得看下去。只要核心 CTA 穩、內容清楚，轉換率通常比花俏特效更重要。