首先，制作EDM郵件的一個(gè)準(zhǔn)則就是使用table布局和inline style，因?yàn)楹芏鄻邮胶蜆?biāo)簽郵件客戶端是不識(shí)別的，再一個(gè)外部資源引入的CSS/JS和寫在

A Sad Story

一開始，我們使用了網(wǎng)頁三劍客之DreamWaver，在一整張圖片上使用標(biāo)簽增加鏈接，網(wǎng)頁和outlook里測試都非常perfect，但是放到Mac客戶端里，鏈接無法被識(shí)別出來。

然后我們又使用了網(wǎng)頁三劍客之Photoshop，對(duì)整張圖進(jìn)行了切片，并給切片附上了鏈接，然后直接導(dǎo)出為html，出來直接就是table布局，一些常用的樣式，比如:

border=0cellpadding=0cellspacing=0

這些都已經(jīng)以inline的形式加入到table里了，看起來很完美了，可是發(fā)出去以后windows下的outlook顯示有白邊：效果是這樣的：

我們一開始認(rèn)為，那一定是IE瀏覽器的鍋，于是用瀏覽器打開頁面一看，表現(xiàn)也是有白邊，加各種樣式也去不掉，后來發(fā)現(xiàn)是代碼間的換行導(dǎo)致的，于是很簡單，我們隨便弄個(gè)在線的html壓縮工具把代碼一壓縮就行了，IE下的白邊果然就沒有了。

然后再看，發(fā)現(xiàn)鏈接有默認(rèn)樣式（白邊存在時(shí)不出現(xiàn)，很神奇），一個(gè)很難看的藍(lán)框框，這個(gè)也簡單，把圖片和鏈接的border和outline、text-decoration 統(tǒng)統(tǒng)設(shè)為none就行。

但是茫茫多的圖片和鏈接，都要到inline里面一個(gè)一個(gè)設(shè)置顯然工作量很大，沒關(guān)系，我們可以使用juice這個(gè)工具，可以很方便的幫我們把style放到inline里面去。寫個(gè)gulp任務(wù)還是很容易的。

再看IE瀏覽器的效果，OK了，但是回頭看windows outlook客戶端，還是老樣子，時(shí)間太晚，決定回家再說，家里裝的最新的windows10自帶的新式郵件客戶端，估計(jì)高級(jí)貨應(yīng)該沒問題，結(jié)果回去一看還是一樣的問題。微軟太令我失望了。不過新的客戶端可以很容易的把郵件另存為eml格式，這樣我用編輯器打開就可以查看源碼了，于是我就去找別人寫好的案例，自己寫不行，抄還不會(huì)么？

發(fā)現(xiàn)人家有的是把鏈接和圖片包在

標(biāo)簽里，沒關(guān)系，可以用cheerio這個(gè)node端的jQuey庫，找到文本里所有的

下的或，只需要用iQuery一樣的wrap語法外面包一層就行：varcheerio=require('cheerio');var$=(content);varp=$('')$('td>a').wrap(p);$('td>img').wrap(p);

心里剛剛為自己的機(jī)智點(diǎn)贊，但是實(shí)驗(yàn)的效果依然跟之前一樣?？磥聿皇沁@個(gè)原因。

最后只得一張圖片一張圖片的check，希望能通過歸納法找到規(guī)律，結(jié)果還真找到了，之前切圖的同學(xué)有一些圖片高度上切的比較窄，而outlook對(duì)應(yīng)瀏覽器的渲染對(duì)tr有個(gè)內(nèi)置的最小高度，當(dāng)圖片高度小于這個(gè)最小高度的話，白邊就出現(xiàn)了，于是乎只能重新切圖。

切完圖以后再retry，效果比之前好很多，但還是有細(xì)細(xì)的白邊，于是繼續(xù)另存以后check代碼，發(fā)現(xiàn)我們之前因?yàn)閟afari瀏覽器可以很方便的直接將網(wǎng)頁以郵件發(fā)送，都是用的這種形式進(jìn)行發(fā)送，但是代碼里顯示，用這種方式發(fā)的話，它會(huì)在你的代碼外面包一些額外的標(biāo)簽

[object Object]

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

標(biāo)簽，效果就OK了，但是怎么把這個(gè)郵件發(fā)出去就是問題了。最后嘗試了一下，發(fā)現(xiàn)可以先用safari發(fā)送給自己，收到以后再全選以后復(fù)制粘貼用郵件客戶端發(fā)送，就不會(huì)有這些額外的標(biāo)簽了。希望本文能幫助到您！

點(diǎn)贊 轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）

關(guān)注 ｛我｝，享受文章首發(fā)體驗(yàn)！

每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”

原文鏈接：

作者：謝郁