最做了郵箱簽名的需求，想著之前做過(guò)兩次簽名也不是很難   于是開(kāi)始了本次outlook簽名的超長(zhǎng)途旅行





本次總結(jié)不到位的或者不正確的地方 還請(qǐng)大神指正





首先手?jǐn)]一個(gè)table出來(lái) 寫(xiě)內(nèi)容

    1.郵件使用table+css布局



    2.郵件主要部分在body內(nèi)部，所以樣式一定要寫(xiě)成內(nèi)嵌的，不能在head標(biāo)簽中寫(xiě)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>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的開(kāi)發(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ò)友好度測(cè)試’評(píng)級(jí)：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                

                                

                                                                        </td>
                                

                                

                                                                    </tr>
                                

                                

                                                                </tbody>
                                

                                

                                                        </table>                                                          
                                

                                

                                                       </td>
                                

                                

                                                  </tr>
                                

                                

                                                    
                                

                                

                                       </tbody>
                                

                                

                                    </table>           
                                

                            

                        

                    

                

            

        

    




    3.不能用浮動(dòng)的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識(shí)別，但是在outlook中無(wú)法識(shí)別。



    4.表格的border，使用table上的border屬性，可以在qq瀏覽器中兼容，但是在outlook中打開(kāi)是沒(méi)有邊框的，這種情況，我么只能給每一個(gè)td加一個(gè)border，在table中使用border-collapse:collapse;來(lái)合并重復(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會(huì)在outlook中顯示不出border；



    5.為了保證兼容性，需要把郵件的寬度設(shè)置為600px，最大600px；



    6.少用img，因?yàn)楹芏噜]箱客戶端默認(rèn)不顯示圖片，所以，如果需要圖片的話，一定要寫(xiě)好alt和title；



    7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，




    


        


            


                


                    


                        


                            

                                1
                            

                        

                        


                            


                                

                                    <div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
                                

                            

                        

                    

                

            

        

    




    8.郵件不支持javascript，flash以及一些特殊的標(biāo)簽。

因?yàn)椴荒芨?dòng) 定位 等  一些設(shè)計(jì)筆記復(fù)雜的內(nèi)容 需要橫向排列的  只能多擼幾個(gè)table了 暫時(shí)我是這樣解決的 比較麻煩



在outlook簽名中最難處理的行高，line-height屬性，outlook的這個(gè)屬性只能支持在塊上設(shè)置，比如可以給td標(biāo)簽設(shè)置line-height，但是不能給span設(shè)置line-height，否則行高設(shè)置是不起作用的。

     具體內(nèi)容可以根據(jù)實(shí)際情況改寫(xiě)。修改簽名文件后，最好關(guān)閉outlook重新打開(kāi)一下，要不然outlook里面會(huì)有緩存，造成顯示錯(cuò)誤。


緊接著 在圖片引用上遇到了問(wèn)題
https的圖片調(diào)用 outlook竟然給屏蔽了， 需要用戶開(kāi)啟權(quán)限才能顯示 非常影響用戶體驗(yàn)，

于是我就把圖片換成base64格式引用， 同樣遇到了問(wèn)題， base64格式下 outlook無(wú)法使用style操控圖片尺寸，這就使圖片的寬高變成非常小，同樣清晰度也大大降低， 
而且outlook在引用base64格式圖片情況下  如果圖片過(guò)小 還會(huì)出現(xiàn)部分黑邊 十分的麻煩
目前暫時(shí)沒(méi)找他其他的方案處理，有大神幫忙指點(diǎn)下


最總邊學(xué)邊做的情況下完成了這個(gè)簽名， 雖然一路坎坷 還算比較滿意的完成了這次簽名
記錄一下 繼續(xù)學(xué)習(xí)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)