制作html郵件的注意點


由於之前python那邊有一些制作前端html郵件的需求,所以在這過程中也有了一些自己的心得體會
 
1.  不要外聯css
關於css的支持可以參考 http://www.campaignmonitor.com/css/ ,里面有各個郵件系統中的支持情況的統計列表。在里面我們可以看到
所以,通過html的標簽屬性或者style屬性來設置頁面的css樣式。而在HTML電子郵件的開發中,有一條黃金法則:
如果一個屬性存在於HTML中,絕對使用標簽屬性而不使用CSS樣式
 
2. 使用table布局
為什么要用古老的table布局呢?因為郵件的客戶端一般都采取比較原始的解析方式,我們可以郵件客戶端比喻為瀏覽器界的IE6。
如果采取div,再用position或float來布局的話,
由於position屬性在Outlook07/10/13、Yahoo! Mail和Google Gmail下不支持,
float屬性在Outlook客戶端和網頁端均不支持,
所以兼容性並不友好,到時在某些情況下頁面就會死得很難看。
所以,采取古老的table嵌套布局穩定性最好,而且可通過align="center"實現萬能居中
 
3. 所有img標簽設置alt屬性及border=0
設置alt屬性是為了防止圖片顯示不出來時,至少有文字說明,讓用戶明白意思。
設置border=0,我也不清楚為什么要設置border=0,但它確實能讓圖片在更多情況下顯示出來。
當然,在一些情況下仍然不支持,比如gmail網頁端發送到QQ郵箱網頁端(圖片仍然顯示不出來,查看源代碼發現img標簽的src和alt屬性都被和諧了)
同時,可為img設置display:block,可用來修復一些電子郵件客戶端圖片下面空白間距。
另外,如果一定要用到圖片的話,個人建議最好把圖片上傳到服務器,或者對於不大的圖片直接使用base64。
 
4. 設置background-color時,永遠記住要使用完整的6個完整的十六進制編碼,如果使用三個簡寫字符,不總是有效
雖然background-color屬性對於所有郵件系統都支持,但賦值時記得用6個完整的十六進制編碼。
哪怕是黑色,也不要用#000,而是#000000
 
5. 用padding,不用margin
margin屬性對於Outlook的網頁端並不支持
padding可支持所有郵件系統,至少我padding用到現在並沒有出現不兼容的情況。
但我看網上說table布局的話padding是沒問題的,但如果用div布局的話padding會變得不可控,這一點我還沒有嘗試過。
 
這是之前做html郵件的一些心得體會,以后有其他收獲再繼續補充。
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM