郵件內容所在上下文或者說所在外部容器（以下簡稱環境）都是由郵箱服務商決定的，這就要求郵件內容需要在任何一種情況下都要正確顯示。
這些環境可能是以下某幾種情況：
- 可能是個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><!--
如果使用語義化標籤，那麼需要多寫一些style，以避免被環境中的css覆蓋 --><h2 style="width:100px;height:100px;margin:0;padding:0;fong-weight:normal;font-size:12px;"></h2><!--
而使用無語義標籤，就可以省下很多style --><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/" 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" 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> |