HTML 郵件內(nèi)容雖然也是 HTML残黑，但是和我們?cè)诰W(wǎng)頁上使用的 HTML 不同寝优，因?yàn)榘踩蛏灰啵鞔筻]箱服務(wù)商及郵件客戶端都會(huì)對(duì)郵件內(nèi)容進(jìn)行一定程度上的處理尖淘，不會(huì)按照你寫的原本 HTML 展示。
在桌面和移動(dòng)端渲染電子郵件大約有上百萬種不同的組合方式著觉。
尤其是鼎鼎大名的 OutLook，從 OutLook2007 開始便使用 Word HTML 引擎進(jìn)行渲染惊暴，為了它的安全性從而使得整個(gè)郵件倒退回了 2000 年前饼丘，為了郵件的兼容性你不得不使用很多廢棄的標(biāo)簽、屬性辽话，并且這一狀況將會(huì)維持無數(shù)個(gè)
年頭肄鸽，因?yàn)殡m然萬事終有盡頭卫病，但 OutLook 始終存在。
因?yàn)槲④浺幌虻靥亓ⅹ?dú)行典徘，使得 OutLook 成為了最難啃的骨頭蟀苛。因?yàn)?OutLook 支持的標(biāo)簽和屬性少得可憐，所以只要兼容了 OutLook逮诲，其他郵箱客戶端基本都不會(huì)有什么問題帜平。如果你開始開發(fā) HTML 郵件并打算為其在各個(gè)郵箱里的兼容性努力，下面的建議將非常有用梅鹦。
基本規(guī)則
布局使用table
這幾乎是 HTML 郵件與普通 HTML 頁面最大的區(qū)別裆甩，因?yàn)楦鱾€(gè)郵箱對(duì)div + css這一套布局的解析問題很大（如 float / position 等 CSS 都會(huì)被過濾，甚至 margin: 0 auto; 都不起作用）齐唆，基本各大郵箱都會(huì)解析混亂嗤栓，所以老式的 table 布局是上乘之選。這就意味著 HTML 郵件中幾乎只有這幾個(gè)元素——table / tr / td / span / img / a箍邮，盡量避免使用 div / p或是其他標(biāo)簽茉帅。
而且并不是所有郵箱都支持 colspan / rowspan 屬性，所以所有布局都需要使用 table 嵌套解決锭弊。
使用表格布局導(dǎo)致的最直接的問題就是會(huì)產(chǎn)生多余的空白像素堪澎，所以要養(yǎng)成習(xí)慣給每個(gè)table 都加上邊框 border，單元格內(nèi)邊距 cellpadding廷蓉，單元格間距 cellspacing全封，邊框合并屬性 border-collapse 這些屬性：
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<!-- ... -->
</table>
body 外的內(nèi)容幾乎無用
我們知道完整的 HTML 包括 DOCTYPE 聲明、html和 head標(biāo)簽及其內(nèi)容桃犬、body 標(biāo)簽刹悴，對(duì)于在一個(gè) iframe 中顯示郵件內(nèi)容的郵箱還好，會(huì)保留上述結(jié)構(gòu)攒暇，但是有些郵件（如 Gmail）都是在 div 中直接包含土匀，這就對(duì)安全要求極為苛刻。安全原因郵箱會(huì)默認(rèn)把上述結(jié)構(gòu)做刪除處理形用，所以寫了幾乎沒有作用就轧，在可能的情況下盡量把內(nèi)容寫到 body 內(nèi)，甚至建議從 table開寫田度，直接放棄 DOCTYPE / html / head / body標(biāo)簽妒御。
使用內(nèi)聯(lián)樣式
并不是使用 style 屬性就保險(xiǎn)了，很多郵箱會(huì)對(duì)特定標(biāo)簽的屬性做強(qiáng)制改造镇饺。
比如在 OutLook 中乎莉，圖片使用以下方式來設(shè)置寬高是無效的：
<img style="width: 10px; height: 10px;" src="*.png" />
正確的設(shè)置方法：
<img width="10" height="10" src="*.png" />
所以在有屬性能夠?qū)崿F(xiàn)樣式效果的時(shí)候盡量使用屬性，常見的可用屬性有：
width
height
bgcolor
align
valign
……
所有樣式單獨(dú)指定
在寫頁面的時(shí)候利用 CSS 的繼承會(huì)為我們帶來很多便利，但是到了 HTML 郵件惋啃，一切都要 say NO!
其實(shí)繼承規(guī)則依舊有效哼鬓，但是大部分郵件都無法完整繼承樣式，并且郵箱的默認(rèn)樣式也會(huì)對(duì)郵件產(chǎn)生一些頭疼的干擾边灭。比如 font-family异希，OutLook 中若想改變字體，至少每個(gè) table 中都要指定 font-family绒瘦，而在 QQ 郵箱甚至必須每個(gè) td 都設(shè)置 font-family 才能全部生效称簿。
因此每個(gè)標(biāo)簽單獨(dú)指定樣式是必須的，盡可能不要依賴?yán)^承椭坚，即使它十分地繁瑣予跌。
腳本？想都不要想善茎！
圖片相關(guān)
style 內(nèi)容里面 background 可以設(shè)置 color券册，但是 image 會(huì)被過濾，就是說不能通過 CSS 來設(shè)置背景圖片了垂涯。但是有一個(gè)很有意思的元素屬性烁焙，也叫 background，里面可以定義一個(gè)圖片路徑耕赘，但是功能有限骄蝇，比如無法定位背景圖片等。
例如要給一個(gè)單元格加一個(gè)背景操骡，必須這樣寫：
<td background="*.png">
<!-- ... -->
</td>
指定 width 和 height 屬性
因?yàn)樵谟行┼]箱里九火，圖片不是默認(rèn)加載的，往往加載前需要用戶的許可册招。那么高寬的指定可以使郵件在沒有圖片撐出樣子前也能保持良好的大小結(jié)構(gòu)岔激，加上 alt 屬性更可以明確告知圖片的內(nèi)容讓用戶選擇是否下載它們。
如果因?yàn)轫?xiàng)目需要（比如需要適配 Retina 高分屏）是掰，width 和 height屬性更是必不可少的虑鼎，并且由于一些 outlook 版本的奇葩表現(xiàn)，width 和 height 屬性一定不要加上單位键痛！一定不要加上單位炫彩！一定不要加上單位！重要的事情說三遍絮短。
否則你希望是這樣的：
<img width="10" height="10" src="*.png" />
但實(shí)際上它是這樣的
<img width="10px" height="10px" src="*.png" />
因?yàn)榧由蠁挝粫?huì)使一些版本的 OutLook 無法正確識(shí)別江兢，導(dǎo)致圖片顯示使用實(shí)際的寬高而非我們?cè)O(shè)置的。
當(dāng)然丁频，常規(guī)項(xiàng)目中應(yīng)盡可能保持設(shè)置的 width 和 height 的值與實(shí)際的寬高一致划址。
margin 與 padding
Outlook 2007-2013 不支持圖片的 margin 與 padding 樣式扔嵌，必要的時(shí)候可以嘗試 hspace 和 vspace 屬性：
<img vspace="10" hspace="10" src="*.png" />
或者為圖片本身添加額外的空間（這個(gè)實(shí)在太LOW了，不推薦）
文字相關(guān)
字體
在 HTML 郵件中夺颤，font-family 只支持系統(tǒng)字體，不支持自定義字體胁勺，也不支持 font 簡寫世澜，color 盡可能也不要使用簡寫：
font: 12px / 14px Arial, sans-serif;
color: #999;
需要寫成：
line-height: 14px;
font-size: 12px;
font-family: "微軟雅黑", Arial, sans-serif;
color: #999999;
對(duì)于加粗字體，我們可以使用 b 標(biāo)簽而不是 CSS 的 font-weight署穗，前文說過寥裂，HTML 標(biāo)簽和屬性能解決的樣式?jīng)Q不使用 CSS 樣式。
行高
在 OutLook 中會(huì)有個(gè)默認(rèn)的行高最小值案疲，特別是當(dāng)設(shè)置 font-family 為微軟雅黑時(shí)封恰，默認(rèn)的行高差不多為 Word 中的兩倍行距，如果line-height 設(shè)置的值小于默認(rèn)的行高褐啡，無論你設(shè)置的是多少诺舔，則始終使用默認(rèn)值，在很多情況下這是不能忍的备畦，好在有個(gè)神奇的 mso-line-height-rule低飒，使用行高時(shí)添加 mso-line-height-rule:exactly; 就能使行高始終等于我們所設(shè)置的值。
<td style="mso-line-height-rule: exactly; line-height: 36px;">
<!-- ... -->
</td>
這只是微軟的 CSS 屬性懂盐，對(duì)其他客戶端沒影響褥赊。并且該屬性只在塊元素上有效，所以想在 font 和 span 中用就洗洗睡了吧莉恼。
使用前：
使用后：
不過這種實(shí)現(xiàn)方式有點(diǎn)瑕疵拌喉，就是會(huì)導(dǎo)致大號(hào)字體無法垂直居中。
參考文獻(xiàn)：
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
What You Should Know About HTML Email
EDM制作要點(diǎn)
Outlook HTML 渲染引擎
轉(zhuǎn)載自https://segmentfault.com/a/1190000008864116
感謝作者 hardylin
