Email 寄信-css/html 排版,跑版問題

繼上次我寫過一篇筆記 : HTML製作edm的技巧與問題
最近發現即便我遵守一些製作edm或是email信件的規則，一樣會有在各大mail system(各大信箱，ex:Microsoft outlook, gmail, hotmail, Yahoo mail....)出現各種零零總總的問題，我真是受夠了這個問題...，埃..為了處理這種UI在各個信箱顯示不同結果的問題，我下定決定我一定要找到方法。

說實話起初我不覺得信件的CSS在一兩種信箱中跑版沒有甚麼奇怪
(好吧，就當作我能力不好吧)
但基本上大部分的信件信筒為了防止事件監聽會有些行為上的限制
以及css的部分送到信箱後又會被重新解析過
Microsoft outlook就更不用說了
這雖然是信件收發軟體但他畢竟不是瀏覽器
一般信件寄到是用瀏覽器開啟的信箱就已經有很多css跟html排版的限制了

後來呢就做各種嘗試，每種失敗我都記錄起來，多試還是有用的xd。

Gmail /  Hotmail / Yahoo Mail
我發現信箱的排版行內樣式 hotmail / outlook 不支援Margin，所以如果需要設邊界寬度，縮排，用padding可以支援幾乎全部。
(我同事建議用border，設寬度然後顏色透明)





Outlook
outlook不吃padding，不吃margin，按鈕也不吃text-align，如果有人也跟我遇到一樣的問題，可以告訴你一個解決方式就是，把信件正常不破版的樣子的，整個複製貼到Mircosoft Word，然後轉存成html格式，再用文字編輯器開啟那個html檔，你會得到很多線索，這些線索是甚麼? 就是具有 mso-前綴字的css style寫法

我發現其實，正常的css如果在outlook不能作用
那就用從那個html檔找-mso前綴字的css

比方說我的行內樣式原本是padding-left:50px;
要讓outlook也吃的到padding-left，寫"padding-left"是沒有用的
我從那個從word轉存成html的檔案發現寫 mso-para-margin-left 是有用的，Outlook吃這個!

結果後來那句行內樣式就變成了 padding-left:50px;mso-para-margin-left:2gd
沒錯，單位是gd，很特別吧xd 從Word得到的啟發~別問我為什麼是gd，我也不知道

不過多加了mso前綴字的css整個輕鬆多了，可以特別針對outlook調整css，而且不影響原本的css，不用整個流程全部跑一次，也不用所有的主流信箱都測過



每封信都要測，每個信箱都要收到，這樣要測到甚麼時候?
因為我是f2e，在趕案子的同時我也沒那個時間好好自己寫發信的php還是什麼來做測試
有個好用的網站 :

針對這篇的主題，若要一直嘗試解決符合各大信箱的html/css
可用這三個網站做共同測試，也可以省下每封信都一封一封的測
也可以大大減少來來回回修改css:

• Puts Mail
  只要把email的html碼貼上去，然後填上你所擁有的各大信箱，他可以把你要寄的信寄到你所有想寄過去的信箱，看寄出去後的樣子，完全不用跑網站的流程，就可以一封封的測試
• Preview Email in Gmail, Hotmail, AOL, and Yahoo in seconds.
  網站是貼上html碼，可以直接瀏覽寄到特性信箱後的樣子，但outlook的好像看不到
• CSS Support
  看各個信件系統支援的CSS

[20140522 補充]
Mastering HTML Email