2021-6-30 前端達(dá)人
最做了郵箱簽名的需求，想著之前做過兩次簽名也不是很難 于是開始了本次outlook簽名的超長途旅行
本次總結(jié)不到位的或者不正確的地方 還請大神指正
首先手?jǐn)]一個table出來 寫內(nèi)容
1.郵件使用table+css布局
2.郵件主要部分在body內(nèi)部，所以樣式一定要寫成內(nèi)嵌的，不能在head標(biāo)簽中寫style，也不能外聯(lián)。
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微軟雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
<tbody>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
<table width="100%" border="0" cellpadding="5" cellspacing="0" >
<tbody>
<tr>
<td>
<p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br> 尊敬的開發(fā)者：<br> </p>
<p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;"><br> “xxx”在此次的‘網(wǎng)絡(luò)友好度測試’評級：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
3.不能用浮動的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識別，但是在outlook中無法識別。
4.表格的border，使用table上的border屬性，可以在qq瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，我么只能給每一個td加一個border，在table中使用border-collapse:collapse;來合并重復(fù)的邊框。
如：
1
<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
這樣設(shè)置border會在outlook中顯示不出border；
5.為了保證兼容性，需要把郵件的寬度設(shè)置為600px，最大600px；
6.少用img，因為很多郵箱客戶端默認(rèn)不顯示圖片，所以，如果需要圖片的話，一定要寫好alt和title；
7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，
1
<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
8.郵件不支持javascript，flash以及一些特殊的標(biāo)簽。
因為不能浮動 定位 等 一些設(shè)計筆記復(fù)雜的內(nèi)容 需要橫向排列的 只能多擼幾個table了 暫時我是這樣解決的 比較麻煩
在outlook簽名中最難處理的行高，line-height屬性，outlook的這個屬性只能支持在塊上設(shè)置，比如可以給td標(biāo)簽設(shè)置line-height，但是不能給span設(shè)置line-height，否則行高設(shè)置是不起作用的。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計( www.newchinaweekly.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.newchinaweekly.com
