如何進行EDM郵件製作

首先，製作EDM郵件的一個準則就是使用table佈局和inline style，因為很多樣式和標籤郵件客戶端是不識別的，再一個外部資源引入的CSS/JS和寫在

A Sad Story

一開始，我們使用了網頁三劍客之DreamWaver，在一整張圖片上使用

然後我們又使用了網頁三劍客之Photoshop，對整張圖進行了切片，並給切片附上了連結，然後直接匯出為html，出來直接就是table佈局，一些常用的樣式，比如:

border=0 cellpadding=0 cellspacing=0

這些都已經以inline的形式加入到table裡了，看起來很完美了，可是發出去以後windows下的outlook顯示有白邊：效果是這樣的：

我們一開始認為，那一定是IE瀏覽器的鍋，於是用瀏覽器開啟頁面一看，表現也是有白邊，加各種樣式也去不掉，後來發現是程式碼間的換行導致的，於是很簡單，我們隨便弄個線上的html壓縮工具把程式碼一壓縮就行了，IE下的白邊果然就沒有了。

然後再看，發現連結有預設樣式（白邊存在時不出現，很神奇），一個很難看的藍框框，這個也簡單，把圖片和連結的border和outline、text-decoration 統統設為none就行。

但是茫茫多的圖片和連結，都要到inline裡面一個一個設定顯然工作量很大，沒關係，我們可以使用juice這個工具，可以很方便的幫我們把style放到inline裡面去。寫個gulp任務還是很容易的。

再看IE瀏覽器的效果，OK了，但是回頭看windows outlook客戶端，還是老樣子，時間太晚，決定回家再說，家裡裝的最新的windows10自帶的新式郵件客戶端，估計高階貨應該沒問題，結果回去一看還是一樣的問題。微軟太令我失望了。不過新的客戶端可以很容易的把郵件另存為eml格式，這樣我用編輯器開啟就可以檢視原始碼了，於是我就去找別人寫好的案例，自己寫不行，抄還不會麼？

發現人家有的是把連結和圖片包在

標籤裡，沒關係，可以用cheerio這個node端的jQuey庫，找到文字里所有的

var cheerio = require('cheerio'); var $ = cheerio.load(content); var p = $('') $('td > a').wrap(p); $('td > img').wrap(p);

心裡剛剛為自己的機智點贊，但是實驗的效果依然跟之前一樣。看來不是這個原因。

最後只得一張圖片一張圖片的check，希望能通過歸納法找到規律，結果還真找到了，之前切圖的同學有一些圖片高度上切的比較窄，而outlook對應瀏覽器的渲染對tr有個內建的最小高度，當圖片高度小於這個最小高度的話，白邊就出現了，於是乎只能重新切圖。

切完圖以後再retry，效果比之前好很多，但還是有細細的白邊，於是繼續另存以後check程式碼，發現我們之前因為safari瀏覽器可以很方便的直接將網頁以郵件傳送，都是用的這種形式進行傳送，但是程式碼裡顯示，用這種方式發的話，它會在你的程式碼外面包一些額外的標籤

[object Object]

外部包了這一堆都是原始碼中沒有的，然後我嘗試去掉了

標籤，效果就OK了，但是怎麼把這個郵件發出去就是問題了。最後嘗試了一下，發現可以先用safari傳送給自己，收到以後再全選以後複製貼上用郵件客戶端傳送，就不會有這些額外的標籤了。

希望本文能幫助到您！

點贊 轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注 ｛我｝，享受文章首發體驗！

每週重點攻克一個前端技術難點。更多精彩前端內容私信 我 回覆“教程”

原文連結：
       http://eux.baidu.com/blog/fe/如何進行edm郵件製作

作者：謝鬱