HTML 郵件兼容問題與解決方案

HTML 郵件內容雖然也是 HTML，可是和咱們在網頁上使用的 HTML 不一樣，由於安全緣由，各大郵箱服務商及郵件客戶端都會對郵件內容進行必定程度上的處理，不會按照你寫的本來 HTML 展現。

在桌面和移動端渲染電子郵件大約有上百萬種不一樣的組合方式。

尤爲是鼎鼎大名的 OutLook，從 OutLook2007 開始便使用 Word HTML 引擎進行渲染，爲了它的安全性從而使得整個郵件倒退回了 2000 年前，爲了郵件的兼容性你不得不使用不少廢棄的標籤、屬性，而且這一情況將會維持無數個
年頭，由於雖然萬事終有盡頭，但 OutLook 始終存在。

「咱們將繼續使用 Word 建立電子郵件信息，由於咱們認爲它是製做電子郵件最好的。」——Outlook 團隊如是說。

由於微軟一貫地特立獨行，使得 OutLook 成爲了最難啃的骨頭。由於 OutLook 支持的標籤和屬性少得可憐，因此只要兼容了 OutLook，其餘郵箱客戶端基本都不會有什麼問題。若是你開始開發 HTML 郵件並打算爲其在各個郵箱裏的兼容性努力，下面的建議將很是有用。

基本規則

佈局使用 table

這幾乎是 HTML 郵件與普通 HTML 頁面最大的區別，由於各個郵箱對 div + css 這一套佈局的解析問題很大（如 float / position 等 CSS 都會被過濾，甚至 margin: 0 auto; 都不起做用），基本各大郵箱都會解析混亂，因此老式的 table 佈局是上乘之選。這就意味着 HTML 郵件中幾乎只有這幾個元素——table / tr / td / span / img / a，儘可能避免使用 div / p 或是其餘標籤。

並且並非全部郵箱都支持 colspan / rowspan 屬性，因此全部佈局都須要使用 table 嵌套解決。

使用表格佈局致使的最直接的問題就是會產生多餘的空白像素，因此要養成習慣給每一個 table 都加上邊框 border，單元格內邊距 cellpadding，單元格間距 cellspacing，邊框合併屬性 border-collapse 這些屬性：

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <!-- ... -->
</table>

body 外的內容幾乎沒用

咱們知道完整的 HTML 包括 DOCTYPE 聲明、html 和 head 標籤及其內容、body 標籤，對於在一個 iframe 中顯示郵件內容的郵箱還好，會保留上述結構，可是有些郵件（如 Gmail）都是在 div 中直接包含，這就對安全要求極爲苛刻。安全緣由郵箱會默認把上述結構作刪除處理，因此寫了幾乎沒有做用，在可能的狀況下儘可能把內容寫到 body 內，甚至建議從 table 開寫，直接放棄 DOCTYPE / html / head / body 標籤。

使用內聯樣式

與普通 HTML 頁面開發同樣，HTML 郵件依舊離不開 CSS，HTML 郵件並不支持外部的 style 文件，上面講到 head 標籤極有可能被刪除，因此不要試圖在 head 標籤內寫 style 標籤。

那麼在 body 內寫 style 標籤是否是就保險了呢？並非！典型的就是 Gmail 郵箱，會把 HTML 郵件內全部 style 標籤刪除，這就意味着只有內聯 style 屬性內的 CSS 是惟一可靠的樣式信息。

能用屬性就不要用樣式

並非使用 style 屬性就保險了，不少郵箱會對特定標籤的屬性作強制改造。

好比在 OutLook 中，圖片使用如下方式來設置寬高是無效的：

<img style="width: 10px; height: 10px;" src="*.png" />

正確的設置方法：

<img width="10" height="10" src="*.png" />

因此在有屬性可以實現樣式效果的時候儘可能使用屬性，常見的可用屬性有：

width
height
bgcolor
align
valign
……

全部樣式單獨指定

在寫頁面的時候利用 CSS 的繼承會爲咱們帶來不少便利，可是到了 HTML 郵件，一切都要 say NO!

其實繼承規則依舊有效，可是大部分郵件都沒法完整繼承樣式，而且郵箱的默認樣式也會對郵件產生一些頭疼的干擾。好比 font-family，OutLook 中若想改變字體，至少每一個 table 中都要指定 font-family，而在 QQ 郵箱甚至必須每一個 td 都設置 font-family 才能所有生效。

所以每一個標籤單獨指定樣式是必須的，儘量不要依賴繼承，即便它十分地繁瑣。

腳本？想都不要想！

如題 (￣▽￣)"

圖片相關

背景圖片

style 內容裏面 background 能夠設置 color，可是 image 會被過濾，就是說不能經過 CSS 來設置背景圖片了。可是有一個頗有意思的元素屬性，也叫 background，裏面能夠定義一個圖片路徑，可是功能有限，好比沒法定位背景圖片等。

例如要給一個單元格加一個背景，必須這樣寫：

<td background="*.png">
    <!-- ... -->
</td>

固然，不使用背景圖片是最好的選擇 ╮(╯-╰)╭

指定 width 和 height 屬性

由於在有些郵箱裏，圖片不是默認加載的，每每加載前須要用戶的許可。那麼高寬的指定可使郵件在沒有圖片撐出樣子前也能保持良好的大小結構，加上 alt 屬性更能夠明確告知圖片的內容讓用戶選擇是否下載它們。

若是由於項目須要（好比須要適配 Retina 高分屏），width 和 height 屬性更是必不可少的，而且因爲一些 outlook 版本的奇葩表現，width 和 height 屬性必定不要加上單位！必定不要加上單位！必定不要加上單位！重要的事情說三遍。

不然你但願的是這樣的：

<img width="10" height="10" src="*.png" />

而實際上它確是這樣的：

<img width="10px" height="10px" src="*.png" />

由於加上單位會使一些版本的 OutLook 沒法正確識別，致使圖片顯示使用實際的寬高而非咱們設置的。

固然，常規項目中應儘量保持設置的 width 和 height 的值與實際的寬高一致。

margin 與 padding

Outlook 2007-2013 不支持圖片的 margin 與 padding 樣式，必要的時候能夠嘗試 hspace 和 vspace 屬性：

<img vspace="10" hspace="10" src="*.png" />

或者爲圖片自己添加額外的空間（這個實在太LOW了，不推薦）

文字相關

字體

在 HTML 郵件中，font-family 只支持系統字體，不支持自定義字體，也不支持 font 簡寫，color 儘量也不要使用簡寫：

font: 12px / 14px Arial, sans-serif; 
color: #999;

須要寫成：

line-height: 14px; 
font-size: 12px; 
font-family: "微軟雅黑", Arial, sans-serif; 
color: #999999;

對於加粗字體，咱們可使用 b 標籤而不是 CSS 的 font-weight，前文說過，HTML 標籤和屬性能解決的樣式決不使用 CSS 樣式。

行高

在 OutLook 中會有個默認的行高最小值，特別是當設置 font-family 爲微軟雅黑時，默認的行高差很少爲 Word 中的兩倍行距，若是 line-height 設置的值小於默認的行高，不管你設置的是多少，則始終使用默認值，在不少狀況下這是不能忍的，好在有個神奇的 mso-line-height-rule，使用行高時添加 mso-line-height-rule:exactly; 就能使行高始終等於咱們所設置的值。

<td style="mso-line-height-rule: exactly; line-height: 36px;">
    <!-- ... -->
</td>

這只是微軟的 CSS 屬性，對其餘客戶端沒影響。而且該屬性只在塊元素上有效，因此想在 font 和 span 中用就洗洗睡了吧。

使用前：

使用後：

不過這種實現方式有點瑕疵，就是會致使大號字體沒法垂直居中，你們自行取捨吧 (lll￢ω￢)

參考文獻

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

What You Should Know About HTML Email

EDM製做要點

Outlook HTML 渲染引擎