outlook邮箱签名制作总结

2021-6-30 前端达人

最做了邮箱签名的需求，想着之前做过两次签名也不是很难于是开始了本次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格式图片情况下如果图片过小还会出现部分黑边十分的麻烦
目前暂时没找他其他的方案处理，有大神帮忙指点下

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