郵件要求兼容 outlook 等郵箱軟件，發現很多樣式都不生效。找到的模板如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<!-- 最外層table-->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="">
<tr>
<td align="center" valign="top">
<!-- 定寬table-->
<table border="0" cellpadding="0" cellspacing="0" width="" style="">
<tr>
<td align="center" valign=""></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<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>
注意點
- 不支持頭部
style、外鏈的linkCSS樣式和JS腳本。所以數據需要使用服務器渲染。 - 只能寫行內樣式。且屬性值不能用縮寫。(
margin, padding, font, background)- 例如:
margin: 10px;需要拆分margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;
- 例如:
- CSS3 屬性不支持
- 如果需要有間距，在
td上加入padding,是我發現的最佳體驗。 - 小圖標需要和文字有間距，文字加入一個HTML實體
即可。 - 建議每個有文字內容的標籤都加上
font-family: '字體名稱'，我用的是‘微軟雅黑’。
*在使用模板時，優先適配客戶所使用的郵件軟件。但並不是說主流瀏覽器的樣式就不做考慮了。郵件軟件不支持頁面的style標籤，但瀏覽器可以支持，因此你的模板可以在兼容軟件郵件的情況下，在style內添加兼容瀏覽器的樣式。 - 建議模板定寬，使瀏覽器和軟件內郵件展現效果一致。
- 我們可能會 遇到多餘字符使用 省略號 的情況。CSS 的表現效果會被軟件屏蔽。軟件內也會屏蔽JS腳本，可以讓後端進行字符串截取，然後加上‘...’ 的方式實現需求。
- 關於郵件模板的測試方法。可以自己下載郵件軟件（例如: outlook)進行效果查看。下面以QQ郵箱爲例：
- 在QQ郵箱中發送測試郵件，進入寫信頁面，點擊格式後，再點擊代碼按鈕。如下圖:
然後直接貼入HTML代碼
填寫自己的郵件軟件的接收地址即可。