Image Problems in HTML Emails

身為一個 PHP 工程師，寫過好幾支 Email 程式也是很正常的經歷，尤其是寄送廣告傳單 EDM 之類的功能。EDM 還是很多公司行號及機關愛用的行銷模式。美術人員製作 EDM 的時候通常會將廣告內容製成一張大圖，然後根據各個連結或功能來切割圖片，最後用表格 <table> 標籤來排版。雖然聽起來很古老，不過因為在 Email 裡能使用的 HTML、CSS 有限，所以老派的做法有其優點。

不過這種做法在許多 email client 其實有點問題，包括 Hotmail 或 GMail 在看這些 EDM 的時候也常發生一樣的問題。那就是圖片之間總是有一條不自然的白線，看起來就像這樣。這張圖是我的 GMail 收到不知名廣告剪下來的，先說這不是我做的。

中間的白線非常明顯。不過大部份的客戶對這條線都沒意見，所以也就醬子過去了。直接最近有客戶反應這條線很醜，才開始思考怎麼去掉它。

後來查到這篇文章才知道原來解決方法非常簡單，只要在每一張圖上加上 style=”display: block;” 的屬性就解決了，看起來就正常多了。