郵件模板規范 · php學習筆記

郵件環境郵件內容所在上下文或者說所在外部容器（以下簡稱環境）都是由郵箱服務商決定的，這就要求郵件內容需要在任何一種情況下都要正確顯示。這些環境可能是以下某幾種情況： * 可能是個iframe，你的內容是被放在body里面的；可能只是個div，你的內容就被放在這個div里面。 * 可能郵箱自身設置了些css，他可能對你產生未知的影響。 * 可能根本沒有申明doctype，即使申明了，也不是你想要的doctype。避免被嵌套在不正確的容器里惑：因為容器可能是body或div，所以，我們郵件內容不應該是一個完整的html。解：所以郵件內容應該是以div為根節點的html片段。避免css沖突或被覆蓋惑：因為環境中可能已經設置了css，比如一些reset、一些.class。解：所以我們只能使用行內style來確保我們的效果，并且在內容根節點上設置基礎style，并且盡量使用div、span等無語義標簽。 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | `` `<``div`?`style``=``"width:600px;text-align:left;color:#000;font:normal 12px/15px arial,simsun;background:#fff;"``>` `內容區域` `</``div``>` `` `<``div`?`style``=``"text-align:center;"``>` `<``div`?`style``=``"width:600px;margin:0 auto;text-align:left;color:#000;font:normal 12px/15px arial,simsun;background:#fff;"``>` `內容區域` `</``div``>` `</``div``>` `` `<``h2`?`style``=``"width:100px;height:100px;margin:0;padding:0;fong-weight:normal;font-size:12px;"``></``h2``>` `` `<``div`?`style``=``"width:100px;height:100px;"``></``div``>` | 避免盒模型錯誤惑：因為doctype的不確定性，我們在寫style的時候，應該考慮無論doctype是什么情況，都可以正常顯示，doctype影響最大的就是盒模型的解析。解：所以我們要將盒模型拆分開來寫，比如我們將原本要定義在某個div上的height和padding分別寫到這個div和他的父元素或子元素上。 | 1 2 3 | `<``div`?`style``=``"height:100px;padding:20px 0;"``>內容</``div``>` `` `<``div`?`style``=``"padding:20px 0;"``><``div`?`style``=``"height:100px;"``>內容</``div``></``div``>` | 其他注意事項 * 因為只能使用行內style，所以清除浮動需要使用額外標簽。 * 避免使用絕對定位，可能會被過濾。 * 避免使用js，可能會被過濾。 * 避免使用table布局，不易于修改維護。 * 背景圖片或內容圖片上的文字信息，必須在代碼中可見。 * 如果沒有特殊要求，所有a鏈接都要從新窗口打開，即target="_blank"，且a標簽內容不能為空。 * 所有鏈接必須設置使用顏色、是否下劃線，即style="text-decoration:;color:;"。 * 重點檢查ie！！！ | 1 2 3 4 5 6 7 8 9 10 11 | `<``div`?`style``=``"width:600px;text-align:left;color:#000;font:normal 12px/15px simsun;background:#d9d9d9;"``>` `<``div`?`style``=``"height:268px;background:url(images/bg1.jpg) no-repeat;"``>` `<``div`?`style``=``"height:228px;"``>` `<``div`?`style``=``"padding:21px 0 0 21px;"``>` `<``a`?`href``=``"[http://yuedu.163.com/](http://yuedu.163.com/)"`?`target``=``"_blank"`?`style``=``"display:block;width:111px;height:28px;overflow:hidden;text-indent:-2000px;text-decoration:none;"`?`title``=``"網易閱讀-隨時隨地品質閱讀"``>網易閱讀-隨時隨地品質閱讀</``a``>` `</``div``>` `<``h2`?`style``=``"margin:0;padding:0;width:0;height:0;overflow:hidden;text-indent:-2000px;"``>你的iPad夠有料嗎？iPad不等于憤怒的小鳥！不等于切水果！下載網易閱讀，給你的iPad添點料，打造你獨一無二的iPad！</``h2``>` `</``div``>` `<``div`?`style``=``"padding:0 0 0 35px;"``><``a`?`href``=``"[http://itunes.apple.com/cn/app/id421092396?mt=8](http://itunes.apple.com/cn/app/id421092396?mt=8)"`?`target``=``"_blank"`?`style``=``"color:#f00;text-decoration:none;"`?`title``=``"下載網易閱讀"``>下載網易閱讀</``a``></``div``>` `</``div``>` `</``div``>` | 發現的問題及解決方案問題：部分智能手機的郵件客戶端可能會有只顯示部分的bug（寬度被截）。解決：在外面套一個同寬的table即可。 | 1 2 3 4 5 | `<``table`?`width``=``"600"`?`cellpadding``=``"0"`?`cellspacing``=``"0"`?`border``=``"0"``><``tr``><``td``>` `<``div`?`style``=``"width:600px;text-align:left;color:#000;font:normal 12px/15px simsun;background:#d9d9d9;"``>` `......` `</``div``>` `</``td``></``tr``></``table``>` | 使用框架推薦使用?[email框架](http://nec.netease.com/framework/html-email.html)?來創建郵件內容。郵件框架如下： <table width="600" cellpadding="0" cellspacing="0" border="0"><tbody><tr><td> <div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">  </div> </td></tr></tbody></table> <div style="text-align:center;"> <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"><tbody><tr><td> <div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">  </div> </td></tr></tbody></table> </div>