HTMLEmail的編寫

NO IMAGE

總結回顧

一、HTML Email的編寫開發場景

  • 你下單 可能 電商會給你發一份 詳情郵件
  • 招行可能給你發下你的賬單郵件
  • 生日了給你發個郵件
  • 轉正了給你發個郵件
  • 入職週年郵件

二、遇到的問題

Email的兼容性很差

郵件內容所在上下文或者說所在外部容器(以下簡稱環境)都是由郵箱服務商決定的,不同的郵件服務商對前端樣式佈局支持都存在在一些差別。這就要求郵件內容需要在任何一種情況下都要正常兼容顯示。

Email容器不同

你寫的郵件前端代碼可能被放在一個iframe中,那你的內容是被放在body裡面的;可能放在一個div中,你的內容就被放在這個div裡面。

Email自帶設置

郵箱軟件本身設置設置了些css,他可能對你產生未知的影響。可能根本沒有申明doctype,即使申明瞭,也不是你想要的doctype。

避免被嵌套在不正確的容器裡

因為容器可能是body或div,我們郵件內容不應該是一個完整的html。所以郵件內容應該是以div為根節點的html片段。

三、環境(外部容器)

我們寫的郵件代碼在不用的郵件服務商下,對應的外部容器不太一樣。

QQ郵箱:自己編寫的內容被嵌套在一個div中

HTMLEmail的編寫

outlook郵箱:自己編寫的內容不知道被嵌套什麼元素裡了,它本身的元素加上我編寫的元素被混在一起了

HTMLEmail的編寫

其他的郵箱你們可以自己測試一下

四、開發的Doctype

一個文檔類型標記是一種標準通用標記語言的文檔類型聲明,它的目的是要告訴標準通用標記語言解析器,它應該使用什麼樣的文檔類型定義(DTD)來解析文檔。

兼容性最好的Doctype是XHTML 1.0 Strict,事實上Gmail和Hotmail會刪掉你的Doctype,換上這個Doctype。使用這個Doctype,也就意味著,不能使用HTML5的語法。

HTMLEmail的編寫
HTMLEmail的編寫

五、開發的佈局

  • 網頁的佈局(layout)推薦使用表格(table)
  • css內嵌,不能在head標籤中寫style,也不能外聯。
  • 不能用浮動的方式定位。position:absolute;float:left;等都不行,float在qq郵箱客戶端中可以識別,但是在outlook中無法識別。
  • 為了保證兼容性,需要把郵件的寬度設置為600px,最大600px;
    HTMLEmail的編寫

網頁的佈局(layout)必須使用表格(table)。首先,放置一個最外層的大表格,用來設置背景。
在內層,放置第二個表格。用來展示內容。第二個table的寬度定為600像素,防止超過客戶端的顯示寬度。

六、開發的樣式

  • 避免css衝突或被覆蓋
  • 儘量使用div、span等無語義標籤。
  • 儘量避免CSS屬性值的簡寫形式
  • font-size:0; 很重要,否則qq郵箱 會自動填寫很多空格,影響佈局
  • 減少不必要的間隙和空格等存在,影響頁面美感
錯誤的寫法
<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"> 
推薦寫法
<div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">

所有的CSS規則,最好都採用行內樣式。因為放置在網頁頭部的樣式,很可能會被客戶端刪除。客戶端對CSS規則的支持情況
另外,不要採用CSS的簡寫形式,有些客戶端不支持。因為環境中可能已經設置了css,比如一些reset、一些.class。
所以我們只能使用行內style來確保我們的效果,並且在內容根節點上設置基礎style,並且儘量使用div、span等無語義標籤。

七、開發圖片

  • 少用img,郵箱不會過濾你的img標籤,但是系統往往會默認不載入陌生來信的圖片
  • 需要img的話,一定要寫好alt和title;
  • Outlook中img最高1728px,超過1728 的部分會被截掉
  • Outlook可能自動縮小img,使其最高位1728px,(上次測試沒縮放,直接裁了)
  • 建議剪裁img,堆疊在一起
  • 有些客戶端會給img鏈接加上邊框,要去除邊框。
<img border="0" style="display:block;
outline:none; 
text-decoration:none; 
-ms-interpolation-mode: bicubic;
border:none;"> 

圖片是唯一可以引用的外部資源。其他的外部資源,比如樣式表文件、字體文件、視頻文件等,一概不能引用。
有些客戶端會給圖片鏈接加上邊框,要去除邊框。
需要注意的是,不少客戶端默認不顯示圖片(比如Gmail),所以要確保即使沒有圖片,主要內容也能被閱讀。

八、開發的background

  • 少用background 推薦儘可能使用切割的img
  • Gmail也不支持css裡面的背景圖
  • 在outlook2007、Outlook2010中,背景圖片將無法顯示
    HTMLEmail的編寫

圖片是唯一可以引用的外部資源。其他的外部資源,比如樣式表文件、字體文件、視頻文件等,一概不能引用。
有些客戶端會給圖片鏈接加上邊框,要去除邊框。
需要注意的是,不少客戶端默認不顯示圖片(比如Gmail),所以要確保即使沒有圖片,主要內容也能被閱讀。

九、email兼容總結

  • 最好使用TABLE標籤佈局 ,通過tr td來控制距離 空白區域等
  • 每個標籤設置:margin:0;padding:0;font-size:0;(注意拆開寫)
  • 設置 width, height
  • 少用img ,少用background
  • 郵件不支持js,a標籤慎用
  • 在使用行高前建議添加mso-line-height-rule:exactly
  • margin:0; padding: 0;colspan=”1″ height=”375″ 順序不可換

客戶端:foxmail outlook QQ郵箱
為了應付Email的怪癖,花了很多時間測試,確保搞定了所有Outlook的坑窪溝洄
但是….還是不可避免有兼容問題
如果你只要兼容 Foxmail and qq郵箱,那你幾乎可以像寫web一樣寫郵件。

由於郵件客戶端對css支持各有不同,所以一定要多測試再發送,保證樣式的正確。如果出現了不兼容的情況,一定要耐心的使用最簡單的方式進行兼容,儘量少用特殊標籤及比較複雜的屬性。

來源:團隊日常總結分享

相關文章

基於函數計算+TensorFlow的ServerlessAI推理

npx:npm包執行工具

面試常問的PECS原則,到底是什麼鬼?

聊聊rocketmq的RemotingTooMuchRequestException