1. 程式人生 > >郵件中嵌入html中要注意的樣式

郵件中嵌入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支援各有不同,所以一定要多測試再發送,保證樣式的正確。如果出現了不相容的情況,一定要耐心的使用最簡單的方式進行相容,儘量少用特殊標籤及比較複雜的屬性。