最做了邮箱签名的需求，想着之前做过两次签名也不是很难   于是开始了本次outlook签名的超长途旅行





本次总结不到位的或者不正确的地方 还请大神指正





首先手撸一个table出来 写内容

    1.邮件使用table+css布局



    2.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。



    如：




    


        


            


                


                    


                        


                            

                                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>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的开发者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                

                                

                                                                            <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　“xxx”在此次的‘网络友好度测试’评级：<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;来合并重复的边框。



    如：




    


        


            


                


                    


                        


                            

                                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;">
                                

                            

                        

                    

                

            

        

    




    这样设置border会在outlook中显示不出border；



    5.为了保证兼容性，需要把邮件的宽度设置为600px，最大600px；



    6.少用img，因为很多邮箱客户端默认不显示图片，所以，如果需要图片的话，一定要写好alt和title；



    7.背景图片，尽量用background-color使用纯色背景，如果一定要用背景图片，使用background属性，




    


        


            


                


                    


                        


                            

                                1
                            

                        

                        


                            


                                

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

                            

                        

                    

                

            

        

    




    8.邮件不支持javascript，flash以及一些特殊的标签。

因为不能浮动 定位 等  一些设计笔记复杂的内容 需要横向排列的  只能多撸几个table了 暂时我是这样解决的 比较麻烦



在outlook签名中最难处理的行高，line-height属性，outlook的这个属性只能支持在块上设置，比如可以给td标签设置line-height，但是不能给span设置line-height，否则行高设置是不起作用的。

     具体内容可以根据实际情况改写。修改签名文件后，最好关闭outlook重新打开一下，要不然outlook里面会有缓存，造成显示错误。


紧接着 在图片引用上遇到了问题
https的图片调用 outlook竟然给屏蔽了， 需要用户开启权限才能显示 非常影响用户体验，

于是我就把图片换成base64格式引用， 同样遇到了问题， base64格式下 outlook无法使用style操控图片尺寸，这就使图片的宽高变成非常小，同样清晰度也大大降低， 
而且outlook在引用base64格式图片情况下  如果图片过小 还会出现部分黑边 十分的麻烦
目前暂时没找他其他的方案处理，有大神帮忙指点下


最总边学边做的情况下完成了这个签名， 虽然一路坎坷 还算比较满意的完成了这次签名
记录一下 继续学习

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务