郵件環(huán)境
郵件內(nèi)容所在上下文或者說所在外部容器（以下簡稱環(huán)境）都是由郵箱服務(wù)商決定的，這就要求郵件內(nèi)容需要在任何一種情況下都要正確顯示。
這些環(huán)境可能是以下某幾種情況：
* 可能是個(gè)iframe，你的內(nèi)容是被放在body里面的；可能只是個(gè)div，你的內(nèi)容就被放在這個(gè)div里面。
* 可能郵箱自身設(shè)置了些css，他可能對(duì)你產(chǎn)生未知的影響。
* 可能根本沒有申明doctype，即使申明了，也不是你想要的doctype。
避免被嵌套在不正確的容器里
惑：因?yàn)槿萜骺赡苁莃ody或div，所以，我們郵件內(nèi)容不應(yīng)該是一個(gè)完整的html。
解：所以郵件內(nèi)容應(yīng)該是以div為根節(jié)點(diǎn)的html片段。
避免css沖突或被覆蓋
惑：因?yàn)榄h(huán)境中可能已經(jīng)設(shè)置了css，比如一些reset、一些.class。
解：所以我們只能使用行內(nèi)style來確保我們的效果，并且在內(nèi)容根節(jié)點(diǎn)上設(shè)置基礎(chǔ)style，并且盡量使用div、span等無語義標(biāo)簽。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
`<!-- 根節(jié)點(diǎn) -->`
`<``div`?`style``=``"width:600px;text-align:left;color:#000;font:normal 12px/15px arial,simsun;background:#fff;"``>`
`內(nèi)容區(qū)域`
`</``div``>`
`<!-- 根節(jié)點(diǎn)-郵件內(nèi)容居中 -->`
`<``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;"``>`
`內(nèi)容區(qū)域`
`</``div``>`
`</``div``>`
`<!-- 如果使用語義化標(biāo)簽，那么需要多寫一些style，以避免被環(huán)境中的css覆蓋 -->`
`<``h2`?`style``=``"width:100px;height:100px;margin:0;padding:0;fong-weight:normal;font-size:12px;"``></``h2``>`
`<!-- 而使用無語義標(biāo)簽，就可以省下很多style -->`
`<``div`?`style``=``"width:100px;height:100px;"``></``div``>`
|
避免盒模型錯(cuò)誤
惑：因?yàn)閐octype的不確定性，我們?cè)趯憇tyle的時(shí)候，應(yīng)該考慮無論doctype是什么情況，都可以正常顯示，doctype影響最大的就是盒模型的解析。
解：所以我們要將盒模型拆分開來寫，比如我們將原本要定義在某個(gè)div上的height和padding分別寫到這個(gè)div和他的父元素或子元素上。
|
1
2
3
|
`<``div`?`style``=``"height:100px;padding:20px 0;"``>內(nèi)容</``div``>`
`<!-- 上面的寫法應(yīng)該改成以下寫法 -->`
`<``div`?`style``=``"padding:20px 0;"``><``div`?`style``=``"height:100px;"``>內(nèi)容</``div``></``div``>`
|
其他注意事項(xiàng)
* 因?yàn)橹荒苁褂眯袃?nèi)style，所以清除浮動(dòng)需要使用額外標(biāo)簽。
* 避免使用絕對(duì)定位，可能會(huì)被過濾。
* 避免使用js，可能會(huì)被過濾。
* 避免使用table布局，不易于修改維護(hù)。
* 背景圖片或內(nèi)容圖片上的文字信息，必須在代碼中可見。
* 如果沒有特殊要求，所有a鏈接都要從新窗口打開，即target="_blank"，且a標(biāo)簽內(nèi)容不能為空。
* 所有鏈接必須設(shè)置使用顏色、是否下劃線，即style="text-decoration:;color:;"。
* 重點(diǎn)檢查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``=``"網(wǎng)易閱讀-隨時(shí)隨地品質(zhì)閱讀"``>網(wǎng)易閱讀-隨時(shí)隨地品質(zhì)閱讀</``a``>`
`</``div``>`
`<``h2`?`style``=``"margin:0;padding:0;width:0;height:0;overflow:hidden;text-indent:-2000px;"``>你的iPad夠有料嗎？iPad不等于憤怒的小鳥！不等于切水果！下載網(wǎng)易閱讀，給你的iPad添點(diǎn)料，打造你獨(dú)一無二的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``=``"下載網(wǎng)易閱讀"``>下載網(wǎng)易閱讀</``a``></``div``>`
`</``div``>`
`</``div``>`
|
發(fā)現(xiàn)的問題及解決方案
問題：部分智能手機(jī)的郵件客戶端可能會(huì)有只顯示部分的bug（寬度被截）。
解決：在外面套一個(gè)同寬的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)?來創(chuàng)建郵件內(nèi)容。
郵件框架如下：
<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>
AI寫作智能體 自主規(guī)劃任務(wù)，支持聯(lián)網(wǎng)查詢和網(wǎng)頁讀取，多模態(tài)高效創(chuàng)作各類分析報(bào)告、商業(yè)計(jì)劃、營銷方案、教學(xué)內(nèi)容等。
![]()
廣告