OutLook始終不離不棄
是不是很討厭為Email代碼兼容Outlook？ 太遺憾了！雖然光都有盡頭，但Outlook始終存在。
為了應付Email的怪癖，我們花了很多時間測試，確保我們搞定了所有Outlook的坑窪溝洄。在這個指導中，我們會分享一下數年來我們應付這種煩人的郵件客戶端的編程經驗，主要包括四個部分
- Outlook必知的17個tricks
- 移除table間距的3種辦法
- 移除Outlook2013圖片間距
- Outlook 2007、2010中的CSS padding
Outlook必知的17個tricks
為Outlook設計就像追逐行蹤飄忽的大白鯨。我們花費了數小時研究，跟蹤缺陷和故障，努力在一個不完善的環境中實現像素級別的完美展示。雖然Outlook時最難啃的骨頭，但是搞定它仍是當務之急。
下面是17條改善Outlook上Email的建議
Outlook忽略圖片的margin和padding
Outlook 2007-2013不支持image的margin與padding樣式，必要的時候嘗試hspace和vspace
<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />
或者為圖片本身添加額外的空間（這個台low了，實在不推薦）
文本不自動折行
對於table中的文字，比如aaaaaaaaaaaaaaaaa，如果希望它們自動折行，需要這樣
<td style="word-break:break-all;">
下面的例子對比一下就看到效果了
Outlook自動為table cell 添加1px border
如果table使用了背景顏色可以看到td有1px的白邊，在內嵌的style中加入樣式
table td { border-collapse: collapse; }
或者使用內聯樣式
<td style="border-collapse: collapse;">... </td>
Outlook有時忽略link的樣式
如果a標簽沒有href屬性，那么Outlook 2007和 2013將不支持其內聯樣式
<a style="font-size: 20px; color: #004990;">Shop Flooring </a>
這種沒有作用，應該修改為
<a href="http://www.test.com" style="font-size: 20px;
color: #004990;">Shop Flooring </a>
間距很重要的話用table實現
Email中最安全的呈現間距就是使用table
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td>Test</td>
</tr>
<tr>
<td valign="top">1.</td>
<td>Test</td>
</tr>
</table>
使用cellpadding和cellspacing做間距
不要在table上使用margin和padding，cellpadding和cellspacing是比較安全的方式，可以達到padding和margin的效果
如果使用table的align屬性
<table align="left">
情況會有些小復雜，后續提到
注意；對table的對齊屬性要額外的小心，你永遠不知道這會對其渲染引擎（Word rending engine）造成什么影響。我們見識過它會嘗試使用自己的定位
Outlook有時會移除padding
Outlook 07 和 10 會把div和h1~h6轉換為p並包裹上span，這個會把html的容器從塊元素轉換為內聯元素
<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
NEW FASHIONS
</h2>
會被轉換為
<p class= style='mso-outline-level:3'>
<b>
<span style='font-size:11.5pt'>
NEW FASHIONS<o:p></o:p>
</span>
</b>
</p>
下面的例子可以看到padding設置在Thunderbird上有效，Outlook 2007上無效
一個解決辦法就是把padding加到td上
<td style="padding: 17px 0 0 0">
<h2 style="font-size: 15px; font-weight: bold; margin: 0">
NEWFASHIONS
</h2>
</td>
另外一個解決辦法就是不使用div和h1~h6，使用p
使用 MSO 控制行高
在使用行高前添加mso-line-height-rule:exactly
<td style="mso-line-height-rule:exactly; line-height:50px;">
這只在塊元素上有效，所以想在font或span中用就洗洗睡了吧，這只是微軟的CSS屬性，對其他客戶端沒影響
Outlook按字面解釋
確保td的rowspan屬性 被設置了正確的值，大部分瀏覽器對錯誤設着的rowspan寬大處理了，但是Outlook 07 和10 會按照你聲明的值解釋渲染，如果聲明多了就悲劇了，即使table中沒有那么多也一樣渲染
Outlook有時忽略width和height
帶有width喝height的塊元素可能顯示和預期不一致，如果水平和垂直空間時由email內容決定的，要了解有時候自定義的空間和對齊不好使，為了最好效果，使用透明的圖片占位或者table cell的height屬性
td有最矮2px的限制
在Outlook 07和10中，td最小高度被限制為2px，如果使用td里面是1px的透明gif和背景顏色，還會出現一個水平條
背景圖片需要使用vml
在Outlook 07、10、13中背景圖片不使用VML的話是不起作用的。VML是一個基於XML的過時的二維矢量圖形文件格式，是Office Open XML標准的一部分。這個問題很難搞定，可以看看這篇博客看看真么使用VML搞定背景圖片
也可以使用Bulletproof background images搞定
Outlook把一些div轉換為p
Outlook經常會把div轉換為p，這個我們真心不理解什么時候和為什么，你知道的話跟我們聊聊
Outlook使用word渲染引擎
Outlook使用text boundaries 和page breaks略微有些不同，Text boundaries被用來在打印頁面的時候分離頁面元素。並不輸出HTML代碼
根據我們研究，我們了解到text boundaries 最大可以拉伸到23.7英寸高（1790px），超過了就會自動插入分割線然后創建新的text boundary。因此如果email中的table的高度高於1790px，它就會變成多個
最好的解決辦法就是不要搞這么高的table，每次添加新的table都會創建新的text boundry，只要table不超過1790px就不會創建多個text boundry
使用table嵌套的時候要注意內層的table別超過了，適當拆分一下，重構比較麻煩，設計的時候注意最好
太高的圖片會被剪切
在Outlook中圖片最高1728px，超過1728 的部分會被截掉（怎么會有人這么喪心病狂在Email中放這么高的圖片）
我們也見過Outlook自動縮小圖片，使其最高位1827px
我們建議你剪裁圖片，堆疊在一起
定義了尺寸的圖片核能渲染不正確
拉伸圖片可能不會正確的渲染，所有的圖形應該設置正確的尺寸在屬性中。不要依賴於HTML定義圖片尺寸這點對於Email很重要
帶動畫的gif不支持
Outlook不支持帶動畫的gif，只會展示第一幀
移除table間距的3種辦法
當我們嘗試左右並列table或者上下堆疊table的時候會發現Outlook 07 和 10 有些小問題，如果發現不想要的間距，你就來對地方了
步驟1 在css中添加border-collapse屬性
<style type="text/css">
table {border-collapse: collapse;}
</style>

步驟2 border、cellpadding、cellspacing設為0
<table border="0" cellpadding="0" cellspacing="0">
步驟3 如果為table添加了align屬性里還需要做些事情
在這種情況下，可能會發現table間十分大的間距，下面說一下解決辦法
- 為td添加bgcolor屬性，根據你的布局選顏色
- 為table添加1px的border，顏色和td一樣
- 為了適應border，減少table的寬度2px
- 把第一個td的內容用p包裹，添加樣式
mso-table-lspace:0;mso-table-rspace:0;
<style type="text/css">table {border-collapse: collapse;}</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
<tr>
<td bgcolor="#00CC99">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 1</p>
</td>
</tr>
<tr>
<td bgcolor="#00CC99">Content in 1</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
<tr>
<td bgcolor="#33FFFF">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 2</p>
</td>
</tr>
<tr>
<td bgcolor="#33FFFF">Content in 2</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
<tr>
<td bgcolor="#993366">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 3</p>
</td>
</tr>
<tr>
<td bgcolor="#993366">Content in 3</td>
</tr>
</table>
</td>
</tr>
</table>
關於這種方法的說明
- 這個問題只會在在table的align被設置為left｜right的時候發生
- 只需要把第一個td的內容用p包裹
- 如果table cells有不同顏色就得再套一層table了
- 這種方法對於image堆疊不起作用，最好把圖片做成一個這種情況
移除Outlook2013圖片間距
Outlook2013填了一些坑，但又挖了新坑。堆疊的圖片會顯示大概10px的間距
這個問題只在圖片高度小於20px的時候出現，開心的是通過簡單的小技巧就可以解決：為td設置和圖片高度一樣的行高
雖然作者說不知道為什么，我們可以大膽猜測一下，image時行內元素，Outlook為td設置了1.3之類的行高，這樣上下就會有間距，設了行高就行了，也有人提到行高設為0或者image設為display:block都能解決
<td width="600" height="80" style="line-height: 80px;" >
<img height="80" src="http://www.website.com/images/Nature_01.jpg"
width="600" />
</td>
Outlook 2007、2010中的CSS padding
針對Outlook設計的人清楚已經被table綁定了，只能用很少的css，但是你可能不知道Outlook會把你的代碼轉換為微軟的代碼
比較重要的一個就是Outlook經常去掉div核h1~h6，換為p和span，有時候保留外部的container有時候刪除
<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0
0 0;">NEW FASHIONS</h2>
<div style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">NEW FASHIONS</div>
<p style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">NEW FASHIONS</p>
會轉換為
<style>
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
h2
{mso-style-priority:9;
mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-link:"Heading 2 Char";
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
mso-pagination:widow-orphan;
mso-outline-level:2;
font-size:18.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
p
{mso-style-noshow:yes;
mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
</style>
<h2 style='margin:0in;margin-bottom:.0001pt'>
<span style='font-size:11.5pt; mso-fareast-font-family:"Times New Roman"'> NEW FASHIONS
<o:p></o:p>
</span>
</h2>
<div>
<p class=MsoNormal>
<b>
<span style='font-size:11.5pt;mso-fareast-font-family:"Times New Roman"'>
NEW FASHIONS
<o:p></o:p>
</span> </b>
</p> </div><
<p style='margin:0in;margin-bottom:.0001pt'> <b>
<span style='font-size:11.5pt'> NEW FASHIONS
<o:p></o:p>
</span>
轉換之后本來對塊元素設置的css到了span上，很多就不好使了，為了避免作者建議使用margin，其實我覺得還是老老實實使用table得了