為什麼不能在 EDM 模版中使用 DIV ？

11-26

編碼問題很困擾

不推薦使用 div 的原因是很多郵件客戶端對 div 布局的支持不好，特別是在用於多欄布局的情況下。

參見常見郵件客戶端對 div CSS 屬性的支持：

以上圖表來自這篇關於郵件中 div 使用的文章：[1]

從圖表中的信息可以看出，就像文章中提到的那樣，「完全不能使用 div」是一個誤解，即使它在大多數情況下是保險的做法。

已經 2012 年了，我們在寫 HTML 郵件模版時還需要使用 inline CSS，使用 table 布局，實在是一件很悲哀的事情。

不過，幸好我們有 MailChimp [2] 這樣的好服務。如果覺得自己寫郵件模版很頭痛，可以去這裡 http://mailchimp.com/resources/html-email-templates/ 下載一些常用的 HTML 模版。

-------
[1] The inconvenient truth about div tags in HTML emails http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
[2] MailChimp http://mailchimp.com/

前端規範 | Front-End-Standards.com

關於EDM的寫法規範如下：

CSS只可使用 內聯樣式表 ，如：style="margin:0;"
設計之初遵循： 圖上無文本，文本後無底紋 的規則
使用 MailChimp HTML Email CSS Fix 參看下文鏈接
引入 CSS Reset for HTML Email 參看下文鏈接
使用Table布局而非DIV
所有圖片使用IMG標籤，如：&
可以適當使用佔位符spacer.gif
多用&
換行而非&
整體最佳寬度為：550-600px
不使用Javascript
正式發送給用戶之前，多次測試

更多細節參考下面鏈接：
12 Killer Tips and Tricks for Building HTML Email
Coding HTML Newsletters (EDM)

美團 EDM 就是用的table + div。
主流的gmail，QQ，163，126，homail，sina 都沒有不兼容的情況。

至於css支持不好這個東西就得自己摸索了，網上的一些文檔不是特別靠譜。

css只能使用行內樣式
IE6下網易郵箱採用混雜模式，所以模版要同時兼容標準模式和混雜模式，簡單說不要把width和padding、border一起用
position在sina等部分郵箱會被幹掉
float在常規郵箱里沒問題的
margin-top在hotmail里是不被支持的，所以margin：0；這樣的縮寫也是不被支持的
負邊距部分郵箱中會被屏蔽，不能用
。。。。。。

EDM中使用DIV是在郵箱客戶端兼容性不是很好，DIV的布局容易錯位。現在EasyEDM郵件平台建議用戶自己設計都是使用TABLE來布局，CSS樣式寫在標籤裡面。我日常設計EDM也全是表格來寫，不使用DIV。

http://www.swordair.com/blog/2012/06/927/ 葵中劍的這篇博客寫的很詳細

http://beaker.mailchimp.com/inline-css
可以將HTML STYLE 標籤內聯到HTML標籤內，將現有的HTML頁面轉換到郵件HTML格式。

米粽說的對，各大主流郵箱對CSS支持都不好，清單如下：
http://www.campaignmonitor.com/css/

另外個人感覺之所以EDM普遍採用table的原因之一也是因為大部分EDM都有很多行列，在較多行列的布局中使用div並不能達到清晰簡潔易讀的目的，而繼續採用table是較好的解決方案。

有一些可以用，但是一些模板容易出問題導致使用了也不顯示，會出現裡面的鏈接點擊不了或者錯位的情況。

@王創關注一下

div不能自己單獨使用，要配合css才能定位。web郵箱會把你郵件里的style過濾掉。所以還是用table吧

我覺得是伺服器或接收郵件顯示的客戶端或網頁系統，給過濾掉了，發送的時候，是可以加的...

無他以前做div 發到sina就是垃圾郵件
換成table 一切oko

沒說不能，只是不推薦

我看到有企業是將圖片截成小圖片來做的，而且是發到我的收件箱。當然這並不是鼓勵大家使用這種方式，提供一個思路，各位可以去試試看。

這段時間也在搞郵件模板，有了Inline CSS就直接寫好div+css 然後轉換了。
網上搜郵件模板出來的也都說不要用div+css，不過考慮到原因，郵件客戶端支持問題……如果你的營銷客戶群體有百分之九十九不使用郵件客戶端，其實倒也不是大問題？？？？
……對於table切割，另外一個頭疼點是設計師出圖幾乎是整個頁面都是背景加圖片加繁雜的裝飾用table的話圖片碎片巨多ORZ

看了蠻多的，現在的主流還是走table路線
也有非主流的
比如返利網最近的郵件（以前都是用table）
而網易LOFTER一直都在走DIV+CSS

郵箱中的使用div的話，css會被過濾；現階段只能用table來布局了。。。