為什麼 HTML 電子郵件看起來會壞掉（以及你能做什麼）📩🛠️

一個關鍵認知：郵件客戶端是在「解釋」你的 HTML

在網頁世界裡，瀏覽器對 HTML/CSS 的支援相對一致，至少你能用 DevTools 找問題、用現代 CSS 佈局。可是電子郵件世界完全不同：

• 不同客戶端有不同渲染引擎：有些像瀏覽器，有些不是。尤其部分 Outlook 版本會用近似 Word 的渲染方式來顯示郵件，這會讓大量 CSS 直接失效。
• 安全過濾很嚴格：script、iframe、某些 CSS、外部資源、甚至部分屬性都可能被移除或重寫。
• 使用者端設定也會影響：例如「不自動載入圖片」、系統字體大小、暗黑模式、縮放比例等。

所以你不是在做「一份 HTML」，你是在做「一份能被很多不同規則正確解釋的 HTML」。

原因 1：CSS 支援差異超大（尤其是 Outlook）

HTML 郵件最常壞在 CSS。你在網站上習以為常的東西，在郵件裡可能是禁用的、半殘的、或被改寫的。

常見踩雷點

• Flex / Grid 不可靠：很多郵件客戶端支援不完整，特別是桌面版 Outlook。
• 外部 CSS / <link> 常被忽略：不少客戶端會移除或不載入外部樣式。
• class selector 不一定穩：有些環境會重寫 class 或降低其優先度。
• margin 可能被吃掉：尤其是段落、圖片或區塊元素的上下間距，在不同客戶端會不一致。
• background-image 支援不一致：背景圖在某些 Outlook 版本會失效，導致原本設計的主視覺直接不見。

因此，HTML 郵件常見做法不是追求最潮的 CSS，而是追求最「老派但穩」的排版方式——例如以表格（table）結構做主要佈局，並把關鍵樣式用 inline style 寫在元素上。

原因 2：圖片常常不顯示，不是你壞，是它故意的

很多收件者會看到「圖片被封鎖」的提示，這通常不是你的 HTML 寫錯，而是郵件客戶端的隱私與安全策略。圖片一旦載入，就可能讓寄件方知道「你已讀了」或至少知道「你打開過」。所以不少環境會預設不自動載入圖片。

你會看到的症狀

• 主視覺空白一大片，看起來像壞圖。
• 按鈕明明是圖片做的，結果變成看不到的透明區。
• 字在圖片裡（例如促銷文案），圖片被擋就等於整段消失。

你能做什麼

• 重要資訊不要放在圖片裡：促銷內容、標題、主訴求請用可選取文字呈現。
• 每張圖都要有 alt 文字：當圖片不載入時，至少讓收件者知道這裡原本要呈現什麼。
• 圖片尺寸要固定：避免載入前後造成跳動。常用方式是明確設 width/height，或用表格 cell 控制。
• 用「像按鈕」的 HTML 按鈕：不要用一張按鈕圖片當連結主體，改用可點擊的文字按鈕樣式。

把圖片當成「加分」而不是「必要」的內容，你的信就不會因為圖片被擋而整封崩盤。

原因 3：暗黑模式會改顏色，而且改得很「有個性」🌙

暗黑模式是近年最常見的跑版元兇之一。很多郵件客戶端會在暗黑模式下自動調整背景與文字顏色，甚至連圖片周圍的白底也可能被「視覺融合」得很奇怪。

典型災情

• 你設計的淺灰背景被強制變深，結果文字對比不足。
• 品牌色被調亮或調暗，整體風格跑掉。
• 透明 PNG 圖片在深色背景上看起來像被挖空或邊緣怪異。
• 按鈕顏色變了，hover 或邊框消失，看起來像不能點。

改善思路

• 確保對比：文字與背景的對比要足夠，就算被系統調整也不至於看不清。
• 避免極端淺色邊界：純白區塊在暗黑模式下常出現「被染色」或邊緣怪影。
• 主視覺別靠背景色撐一切：用清楚的區塊分隔、邊框與間距，讓結構在任何配色下仍然成立。
• 重要 Logo 提供深淺兩版：至少確保在深背景也清楚辨識。

暗黑模式不是不能做漂亮，而是要接受它會「介入」。你能做的是把設計做得更耐打、更不怕被改。

原因 4：寬度、縮放與行動裝置渲染造成「擠壓」

你可能以為你做的是 600px 寬的版面，但收件者可能在：

• 手機 Gmail App 裡看（字體可能被放大、行距被調整）。
• 桌機 Outlook 視窗很窄的預覽窗格裡看（內容被壓縮或換行）。
• 高 DPI 螢幕縮放 125% 或 150% 的環境看（元素比例改變）。

常見症狀

• 兩欄變一欄，但順序亂掉。
• 圖片超出容器，造成水平捲動。
• 按鈕被擠到下一行，或文字被截斷。

實務建議

• 主容器寬度保守：常見安全值是 600px 左右，並兼顧小螢幕可讀性。
• 用表格做結構：你可以更精準控制欄位寬度與對齊。
• 圖片設為可縮放：避免超出容器，並注意行動裝置的縮放行為。
• 避免文字塞太滿：行動裝置會自動調字級，留白不足就容易爆版。

原因 5：字體不是你想用就能用，回退機制會改變排版

你在網站上可以用各種 web font，但在電子郵件裡，字體可用性大幅受限。很多客戶端不支援外部字型載入，或會直接忽略，改用系統字體。

為什麼這會造成「看起來壞掉」

• 不同字體的字寬不同，導致同一句話在某些客戶端突然換行。
• 行高與字距不同，按鈕高度、段落間距看起來不一致。
• 粗體、斜體渲染不同，視覺重量跑掉。

較穩的做法是用一組「好用且常見」的字體堆疊，並在設計時就假設：收件者可能只會看到系統字體。你的版面要能在回退後仍然成立。

原因 6：郵件安全機制會「清洗」你的 HTML

除了渲染差異，還有一種壞法是：你的 HTML 被郵件系統直接改寫。原因可能是安全政策、反追蹤、或清理可疑元素。

常見被處理的內容

• script / event handler：例如 onclick、onload 之類通常會被移除。
• 某些 CSS 屬性：特定表現或定位相關屬性可能被刪。
• 追蹤參數：某些環境會重寫連結或插入保護層。
• 表單元素：input、form 在許多郵件客戶端不可用或直接失效。

因此，HTML 郵件不適合做「互動網頁」。如果你想要互動，通常正確的做法是：在郵件裡用清楚的 CTA 按鈕把人帶回你的網站或 App 裡完成互動。

你可以怎麼做：一份真正能落地的修復清單 ✅

如果你希望同一封信在不同平台看起來都像同一封信，這裡是一份務實的做法（不是理想派，而是能交付派）：

結構策略

• 以表格（table）作為主要佈局骨架，避免依賴 Flex/Grid。
• 關鍵樣式用inline style，不要只寫在 head 或外部 CSS。
• 版面分成明確區塊：header、主內容、CTA、footer，每塊都能獨立成立。

內容策略

• 重要訊息用文字呈現，圖片只是輔助。
• 每張圖片都有 alt，且不要把整個段落放在圖片上。
• 按鈕用 HTML 實作，確保在圖片被擋時仍可點擊。

相容性策略

• 顏色設計考慮暗黑模式：對比要夠、避免純白大片與細灰字。
• 字體以系統字體為基底，避免依賴外部字型。
• 避免複雜定位與動畫效果，越簡單越穩。

測試策略

• 至少在 Gmail（Web/Android/iOS）、Apple Mail（macOS/iOS）、Outlook（桌面/網頁）做交叉檢查。
• 測試「圖片不載入」狀態：你的信是否仍然可讀？CTA 是否仍然明確？
• 測試暗黑模式：品牌色、按鈕、主視覺是否還能辨識？
• 測試不同縮放比例：125%、150% 時是否爆版？

很多人以為跑版是「某一個小 bug」，但其實它是「相容性工程」。你做得越像網頁，就越容易翻車；你做得越像郵件，越能穩穩落地。

如果你想讓信更穩：把期待調整成「跨平台一致」而不是「每個平台都完美」

這句話聽起來像妥協，但其實是專業。因為不同郵件客戶端本來就會做出不同取捨：安全優先、隱私優先、效能優先、或老舊架構包袱。你能追求的是：

• 資訊一致：標題、重點、CTA 不會消失。
• 結構一致：區塊順序與閱讀節奏不亂。
• 可讀性一致：字不會太小、對比不會太低、按鈕不會點不到。
• 品牌感一致：就算顏色被暗黑模式干預，也能辨識是你。

如果以上四點守住了，就算某些角落的間距差 4px、陰影少一點，收件者通常不會覺得「壞掉」，而是覺得「很正常」。

小結：HTML 郵件會壞掉，其實很正常，你只需要用對方法

HTML 電子郵件之所以常常看起來壞掉，是因為它被放在一個受限、分裂、且高度干預的環境裡。你在網頁開發的直覺有一半會失效，但只要你掌握幾個核心策略：表格骨架、inline 樣式、圖片可選、暗黑模式耐受、跨平台測試，你就能把「跑版」從不可控的玄學，變成可管理的工程流程。

最後給你一句很實用的心法：把郵件當成「可靠的訊息載體」，而不是「華麗的小網頁」。當你的設計是為了可靠傳達，收件者看到的就會是清楚、舒服、可信的內容，而不是一封看起來壞掉的信。📩✨