如何編寫兼容各主流郵箱的HTML郵件
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
幾乎每個會員制網(wǎng)站都需要通過后臺發(fā)送郵件來與會員進(jìn)行溝通,如注冊確認(rèn)、營銷推廣。這些由站方發(fā)給會員的信件,往往純文本格式已不能滿足界面和交互的要求,這時候我們就需要發(fā)送html頁面。 幾乎每個會員制網(wǎng)站都需要通過后臺發(fā)送郵件來與會員進(jìn)行溝通,如注冊確認(rèn)、營銷推廣。這些由站方發(fā)給會員的信件,往往純文本格式已不能滿足界面和交互的要求,這時候我們就需要發(fā)送html頁面。由于html郵件不是獨立的host在本站的頁面,是寄人籬下的。所以編寫html郵件與編寫html頁面有很大的不同。因為,各面向網(wǎng)民的主流郵箱都或多或少的會對它們接收到的html郵件在后臺進(jìn)行過濾。毫無疑問,js代碼是被嚴(yán)格過濾掉的,包括所有的事件監(jiān)聽屬性,如onclick、onmouseover,這是基于郵件安全性的考慮。不僅如此,css代碼也會被部分過濾。本人要講的就是如何編寫不被各大主流郵箱過濾的,能正常顯示的html郵件。[br] [p]首先,我們先來看看郵箱是如何展現(xiàn)html郵件的。我本人沒有做過郵件系統(tǒng),況且各大郵箱后臺的過濾算法也不是那么容易可以讓外人知道的。所以,我們只能通過前端展現(xiàn),來推測哪些是被郵箱接受的寫法,而哪些又是會被過濾掉的。通過對gmail、hotmail、163、sohu、sina幾個郵箱的分析,我把郵箱分為兩類:[br]第一類包括gmail、hotmail、sohu,這類郵箱,郵件內(nèi)容是被布局在整個郵箱頁面中的某個div中。如圖:[/p] [p][img]http://info-database.csdn.net/upload/2008-05-06/gmail.png[/img][/p] [p]第二類,包括163、sina,這類郵箱,郵件內(nèi)容被布局在獨立的iframe中。如圖:[/p] [p][img]http://info-database.csdn.net/upload/2008-05-06/sinamail.png[/img][/p] [p]熟悉html的朋友都知道,iframe內(nèi)容是作為獨立的document,與父頁面的元素和css是互不相干的,幾乎可以作為一個獨立的頁面來對待。而如果如果郵件內(nèi)容是在div中,那么郵件內(nèi)容是作為整個郵箱頁面的一個組成部分。顯然,以iframe作為展現(xiàn)方式的郵箱,對郵件內(nèi)容就會寬容許多,因為它給了你一個足夠獨立的表現(xiàn)空間。而div就不是那么客氣了。試想一下,如果你在你的郵件里寫上這么一句css,是不是整個郵箱的展現(xiàn)頁面上字體都變成20px而因此亂了套:[br][br]我們需要寫兼容各郵箱的統(tǒng)一郵件模板,那么必然就要避開以上這種外聯(lián)css寫法,另外類似于float、position等成非正常內(nèi)容流的style也會被過濾,假如你寫了,很可能會影響到外部郵箱的表現(xiàn)。[/p] [p]下面我列出一些編寫原則:[br]1、全局規(guī)則之一,不要寫 |