工作中常會有需求向用戶發送郵件，需要前端工程師來制作html格式的郵件，但是由於郵件客戶端對樣式的支持有限，要兼容很多種瀏覽器需要注意很多原則：
1.郵件使用table+css布局
2.郵件主要部分在body內部，所以樣式一定要寫成內嵌的，不能在head標簽中寫style，也不能外聯。
如：
<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微軟雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
<tbody>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
<table width="100%" border="0" cellpadding="5" cellspacing="0" >
<tbody>
<tr>
<td>
<p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px">
尊敬的開發者：
</p>
<p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;">
“xxx”在此次的‘網絡友好度測試’評級：<span style="color:#F44336;">4顆星</span>（最高5顆星）。
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
3.不能用浮動的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識別，但是在outlook中無法識別。
4.表格的border，使用table上的border屬性，可以在qq瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，我么只能給每一個td加一個border，在table中使用border-collapse:collapse;來合並重復的邊框。
如：
<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;
font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
這樣設置border會在outlook中顯示不出border；
5.為了保證兼容性，需要把郵件的寬度設置為600px，最大600px；
6.少用img，因為很多郵箱客戶端默認不顯示圖片，所以，如果需要圖片的話，一定要寫好alt和title；
7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，
<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
8.郵件不支持javascript，flash以及一些特殊的標簽。
由於郵件客戶端對css支持各有不同，所以一定要多測試再發送，保證樣式的正確。如果出現了不兼容的情況，一定要耐心的使用最簡單的方式進行兼容，盡量少用特殊標簽及比較復雜的屬性。