郵件中嵌入html中要注意的樣式

工做中常會有需求向用戶發送郵件，須要前端工程師來製做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"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的開發者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                        <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　「xxx」在這次的‘網絡友好度測試’評級：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</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支持各有不一樣，因此必定要多測試再發送，保證樣式的正確。若是出現了不兼容的狀況，必定要耐心的使用最簡單的方式進行兼容，儘可能少用特殊標籤及比較複雜的屬性。