outlook 郵件模板注意事項

時間 2019-11-07

原文原文鏈接

背景

最近在準備寫一個html的郵件模板，在網上搜了下資料，而後用express結合reload搭建了一個環境，結合本身開發中遇到的一些坑，總結一下。html

注意事項

1 html的DOCTYPE 這個無需多言，網上不少資料都有介紹，使用最古老的聲明文檔

<!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>HTML Email編寫指南</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/js/reload.js"></script>
  </head>
複製代碼

2 全局樣式寫在body裏邊這裏我遇到過一個字體的bug，body裏邊的字體在mac的outlook客戶端和網頁端都是正常的，可是在window的outlook客戶端上面，字體就變成了宋體，不是微軟雅黑了，後來仍是全都寫在行內樣式裏邊去了。

<body
    style="margin: 0; padding: 0;font-family: 'Microsoft YaHei', '微軟雅黑', sans-serif; "
  >
  </body>
複製代碼

3 全部的佈局樣式都使用table格式

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background:#FAFAFA" >
</table>
複製代碼

4 全部的樣式採用行內樣式
4.1 這裏我遇到了一個問題，若是設置了line-height 和 td的高度同樣的時候，會讓樣式不居中，因此最好使用td自身居中功能
4.2 當td裏邊的內容爲空的時候，在mac的outlook端是正常的，可是到了window的outlook端，就會顯示一條線，特別奇怪，因此若是有空的td的時候，裏邊最好放雞哥空格

<td style="width: 108px;height:80px; padding-left: 30px;padding-right: 20px;" >
  <div style="font-family: 'Microsoft YaHei', '微軟雅黑', sans-serif;width: 108px;height:20px; color: #ffffff;line-height: 20px;font-size: 20px;font-weight: 700;" >
    dssdssds
  </div>
</td>
複製代碼

4 td的寬度必須設置，否則就會拉寬

<td style="height:80px;">
      <div
        style="font-family: 'Microsoft YaHei', '微軟雅黑', sans-serif;width: 54px;height:18px; color: #ffffff;line-height: 18px;text-align: center;font-size:12px;border: 1px solid #ffffff;border-radius: 2px;font-weight: 300;"
      >
        企業版
      </div>
    </td>
複製代碼

在window的outlook office 365下會表現的td的寬度超多54px，達到100px左右，因此必須在td上加上寬度express

<td style="height:80px;width：54px;">
      <div
        style="font-family: 'Microsoft YaHei', '微軟雅黑', sans-serif;width: 54px;height:18px; color: #ffffff;line-height: 18px;text-align: center;font-size:12px;border: 1px solid #ffffff;border-radius: 2px;font-weight: 300;"
      >
        企業版
      </div>
    </td>
複製代碼

5 table裏邊的內容必需要用tr包一層
開始的時候，寫了一個相似於這種結構的

<table>
    <tr>
        <table></table>
    </tr>
    <table></table>
</table>
複製代碼

這種在mac的outlook和window的outlook的（office 365）下面都沒有問題，可是在window的outlook（2016）下面整個外層的table也是居中，可是會把寬度拉的超級寬,只要加一層tr就能夠解決這個問題。bash

<table>
    <tr>
        <table></table>
    </tr>
    <tr><table></table></tr>
</table>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。