Benchmark Email 協助中心

知識庫首頁 aero-right 傳送 aero-right HTML 郵件在不同郵件客戶端顯示的問題

HTML 郵件在不同郵件客戶端顯示的問題

傳送 更新日期 1 六月, 2021

AOL、Yahoo、Gmail 等 ISP 業者會影響郵件在收件匣呈現的樣貌,更別說不同的瀏覽器也會有影響。Benchmark 致力協助我們的客戶建立精美的郵件。使用拖曳式編輯器,編輯適合各種行動裝置的響應式郵件。此外,我們也提供收件匣測試功能,讓您在郵件進到收件人的信箱前,提前瀏覽郵件呈現的樣貌。

建立電子報的最佳作法

有些郵件客戶端設有一些限制,任何一間 ESP 也無法避免。下列幾個重點指出,不論郵件客戶端或是瀏覽郵件的裝置為何,郵件都能顯示相同樣貌的方法。

  • 使用拖曳式編輯器 – 所有拖曳式編輯器裡的郵件範本都是響應式郵件。
  • 開啟郵件的網頁版本選項  將網頁版本連結加入郵件。有些郵件客戶端沒有遵守網路規定,可能會讓您的郵件看起來不整齊。在許可提示區塊啟動此選項。
  • 背景圖片 – 當收件端無法顯示圖片時,郵件會顯示背景圖片的顏色。編輯背景顏色,選擇可以突出文字的顏色,否則郵件可能會呈現空白。
  • 加入圖片的替代文字 – 替代文字是用來描述電子報裡面的圖片。大部分收件端不會自動顯示圖片,所以替代文字可以提供文字說明。使用替代文字,郵件比較不容易被檔信。
  • 對齊圖片 – 大部分情況下,圖片尺寸可能會太大,覆蓋住文字,或是畫質被壓縮。對齊圖片並縮小尺寸來清除格式。如果您使用我們的拖曳式編輯器,這些問題都不用煩惱,因為我們已經為您處理好了。
  • 避免在文字區塊內直接使用較長的 URL 文字串沒有空格的一長串文字,像是很長的 URL 直接插入文字區塊,可能會造成文字超出郵件的寬度。要避免這種情況,請使用 Benchmark Email 編輯器,位於上方工具列的連結工具,插入文字、句子或圖片。想了解更多關於連結選項,點擊此處

當您完成上述設定後,您可能需要發送一封測試信給自己或是給您信任的人。試著在多個裝置上開啟您的測試信,瀏覽郵件設計的樣貌。您也可以在拖曳式編輯器裡使用「收件匣測試」,瀏覽您的郵件在不同裝置上呈現的樣貌。

不同郵件服務商讀取 HTML 郵件已知問題一覽表

郵件客戶端
支援 HTML
已知問題
AOL 4.0 and 5.0

  • 僅支援文字
  • 不支援表單
AOL 6.0, 7.0, and 8.0

  • 標準 HTML
  • 不支援表單
  • 拒收連結到外部樣式表的郵件
AOL 9.0

部份

  • 無法讀取 HTML 圖片及熱連結
  • 不支援表單
  • 內容過長的郵件會轉為壓縮檔
AOL Webmail

部份

  • 不完全支援 XHTML 語法
  • 不支援 <br /> 標籤
  • 不支援錨點標籤 – 在郵件內點擊錨點標籤不會跳到錨點,而是彈出新的收件匣視窗
Apple Mail

  • 標準 HTML
  • 不允許字型標籤 – 使用 <span> 標籤取代
  • 必須點擊兩次錨點連結才能正常運作
  • 在 El Capitan OSX 作業系統下,錨點連結無法運作
Compuserve

  • 僅支援文字
Comcast Smartzone

  • 標準 HTML
  • 背景圖片被封鎖
  • 不支援錨點標籤 – 在郵件內點擊錨點標籤不會跳到設定的錨點,而是彈出新的收件匣視窗
Comcast XFinity

部份

  • 縮短內容過長的電子報 – 使用網頁版本連結或縮短郵件內容
  • 點擊錨點或目錄表不會跳到設定的錨點,而是彈出新的收件匣視窗。
Entourage (Mac)

  • 標準 HTML
Entourage 2008 (Mac)

部份

  • 背景圖片可能被封鎖
  • 支援表格、Flash 或其他外掛、CSS 浮動屬性、CSS 位置屬性以及 GIF 動畫
  • 項目符號由圖片條列取代
Earthlink

部份

  • 有時候文字會加上底線
Eudora 3.1

  • 僅支援文字
Eudora 4.0, 4.2, 4.3, and 5.0

  • 使用 Internet Explorer 時支援標準 HTML
  • 使用預設 Eudora HTML 瀏覽郵件時,HTML 支援度不佳
Gmail

部份

  • 不支援書籤錨點
  • 縮短內容過長的電子報 – 使用網頁版本連結或縮短郵件內容
  • 郵件內的電話號碼轉成超連結
Hotmail

部份

  • 預設不會載入圖片
  • 不支援 <head>、<title>、<meta> 以及 <body> 標籤 – 必須使用行內樣式
  • 4 分鐘後熱連結將失效並移除背景圖片 – 需要開啟驗證
  • CSS 問題
  • 文字可能顯示底線
  • 連續使用 <p> 標籤會產生空白斷行的間距 – 請使用 <div>  標籤,或建立新的文字,不要複製貼上原本的樣式。
Juno 4.0, and 5.0

  • 接近標準 HTML
  • CSS 問題
Lotus Notes 4.6

  • 不支援字型或連結顏色
Lotus Notes 5.0

  • 接近標準 HTML
  • CSS 問題
Novell GroupWise 5.5

  • 標準 HTML
Office 365

部份

  • 標準 HTML
  • 預設不會載入圖片
  • CSS 問題
  • 錨點連結以及目錄表無法運作
  • 圖片常常以儲存在圖庫的原始圖檔大小顯示,造成扭曲或延展 – 請在圖庫重新調整圖片尺寸,然後再插入郵件。
Outlook 97

部份

  • 不支援字型或連結顏色
  • 會有對齊的問題
Outlook 98 and 2000

  • 標準 HTML
  • 不完全支援 CSS
Outlook 98 and 2001 (Mac)

  • 僅支援富文字格式(或稱多文字格式)
Outlook 2003

部份

  • 預設不會載入 HTML 圖片。
Outlook 2007 and 2010

部份

  • 不支援表格、Flash 或其他外掛、CSS 浮動屬性、CSS 位置屬性以及 GIF 動畫
  • 項目符號由圖片條列取代
  • 針對內容冗長且會斷行的郵件插入分頁符號
  • 不支援圖片邊框
  • 超過 1920 x 1080 像素的高解析度圖片會縮小文字,但不會縮小圖片
  • 圖片說明文字樣式會被 Outlook 樣式覆寫
  • 高度超過 1728 像素的圖片會被剪裁
  • 在段落間或 2 倍行高的文字會插入額外一行間距
  • 圖片可能因為電腦顯示設定而變形、扭曲

注意:微軟建立一套工具,協助您檢驗您的郵件在 Outlook 2007 呈現的樣貌。

Outlook 2007 and 2010 (Mac)

部份

  • 不支援錨點連結以及目錄表
  • 不支援 GIF 動畫
Outlook 2013 and 2016

部份

  • 針對內容冗長且會斷行的郵件插入分頁符號
  • 如果區塊最後一個文字是項目符號,郵件會多出一個空的項目符號 – 不要把項目符號放在區塊文字的結果,或是在區塊的結尾標籤 </ul> 前新增 <div style=”display:none;”>&nbsp;</div>
  • 超過 1920 x 1080 像素的高解析度圖片會縮小文字,但不會縮小圖片
  • 圖片可能因為電腦顯示設定而變形、扭曲
  • 不支援 GIF 動畫圖檔
Outlook 2016 (Mac)

部份

  • 不支援錨點連結以及目錄表
Outlook 365

部份

  • 連結顏色預設為藍色,除非前面的文字設定為其他顏色 – 連結需要放在 <span> 以及 <td> 標籤內,<div> 內的文字必須使用不同顏色
  • 點擊錨點或目錄表不會跳到設定的錨點,而是彈出空白視窗。
  • 即使郵件設定靠左對齊,文字仍然會以預設形式出現
  • 圖片沒有間距
Outlook Web Access

部份

  • 標準 HTML
  • 預設不載入圖片
  • 不支援錨點連結以及目錄表
  • 圖片常常以儲存在圖庫的原始圖檔大小顯示,造成扭曲或延展 – 請在圖庫重新調整圖片尺寸,然後再插入郵件。
Outlook Express- PC or Mac

  • 標準 HTML
Pegasus Mail 3.1- Windows

  • 標準 HTML
  • 不支援連結顏色
Smartphones Android, iPhone, etc.

  • 電話號碼可能會以連結方式呈現(可點擊的按鈕)
  • 附加在郵件頁尾實體地址旁的電話號碼可能會被手機認定為日期格式
Verizon

  • 標準 HTML
  • 不支援錨點連結或目錄表連結
Yahoo!

  • 標準 HTML
  • 所有瀏覽器都不支援錨點或目錄表 – 點擊後,郵件會關閉,回到收件匣。
  • 縮短內容過長的電子報 – 使用網頁版本連結或縮短郵件內容

資料來源:StudioCloud

如果您有任何關於郵件顯示的問題,請隨時透過電子郵件線上客服或電話與我們的支援團隊聯絡。