html 郵件內容雖然也是 html，但是和我們在網頁上使用的 html 不同，因為安全原因，各大郵箱服務商及郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本 html 展示。
那麼這幾乎是 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 這些屬性：
border
="0"
cellpadding
="0"
cellspacing
="0"
style
="border-collapse
: collapse;
">
table
>
我們知道完整的 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 屬性就保險了，很多郵箱會對特定標籤的屬性做強制改造。
正確的設定方法：
所以在有屬性能夠實現樣式效果的時候盡量使用屬性，常見的可用屬性有：
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，裡面可以定義乙個路徑，但是功能有限，比如無法定位背景等。
例如要給乙個單元格加乙個背景，必須這樣寫：
background
="*.png"
>
td>
當然，不使用背景是最好的選擇 ╮(╯-╰)╭
指定 width 和 height 屬性如果因為專案需要（比如需要適配 retina 高分屏），width 和 height 屬性更是必不可少的，並且由於一些 outlook 版本的奇葩表現，width 和 height 屬性一定不要加上單位！一定不要加上單位！一定不要加上單位！重要的事情說三遍。
否則你希望的是這樣的：
width
="10"
height
="10"
src="*.png"
/>
筆記 html常見的相容問題
ie ie的雙邊距bug 塊級元素float後設定橫向的margin，ie6顯示的margin比較大。解決辦法 display inline 雙邊距bug 在ie6下，如果對元素設定浮動，同時又設定了margin left或margin right，margin值會加倍 box 這種情況之下ie會產...
HTML5 IE相容問題
最近，為公司做產品的時候用到了html5，用ie11開啟的時候出現了介面亂或者載入js錯誤的問題。ie10 or ie11 browser mode is ie10 document mode more than ie9.add that supports html5 in html page.有的...
html5相容問題總結 201802
1 用fixed定位做的彈出框，彈出框裡面有文字框。fixed 在ios 上相容不友好，會造成游標亂跳。解決方法 當彈出框彈出時給父元素加上fixed定位，此時頁面無法滾動 彈出框關閉時移除 fixed 定位，頁面恢復正常滾動。網上建議用 better scroll,或者用absolute 定位改寫...