Outlook HTML渲染引擎

阅读量：6543 次

发布时间：2019-06-24

本文共 4192 字，大约阅读时间需要 13 分钟。

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

或者为图片本身添加额外的空间（这个台low了，实在不推荐）

文本不自动折行

对于table中的文字，比如aaaaaaaaaaaaaaaaa，如果希望它们自动折行，需要这样

下面的例子对比一下就看到效果了

Outlook自动为table cell 添加1px border

如果table使用了背景颜色可以看到td有1px的白边，在内嵌的style中加入样式

table td { border-collapse: collapse; }

或者使用内联样式

...

Outlook有时忽略link的样式

如果a标签没有href属性，那么Outlook 2007和 2013将不支持其内联样式

Shop Flooring

这种没有作用，应该修改为

Shop Flooring

间距很重要的话用table实现

Email中最安全的呈现间距就是使用table


    
                              â€¢                Test           
                         1.                Test

使用cellpadding和cellspacing做间距

不要在table上使用margin和padding，cellpadding和cellspacing是比较安全的方式，可以达到padding和margin的效果

如果使用table的align属性

情况会有些小复杂，后续提到

注意；对table的对齐属性要额外的小心，你永远不知道这会对其渲染引擎（Word rending engine）造成什么影响。我们见识过它会尝试使用自己的定位

Outlook有时会移除padding

Outlook 07 和 10 会把div和h1~h6转换为p并包裹上span，这个会把html的容器从块元素转换为内联元素

    NEW FASHIONS

会被转换为

NEW FASHIONS

下面的例子可以看到padding设置在Thunderbird上有效，Outlook 2007上无效

一个解决办法就是把padding加到td上

            NEWFASHIONS

另外一个解决办法就是不使用div和h1~h6，使用p

使用 MSO 控制行高

在使用行高前添加mso-line-height-rule:exactly

这只在块元素上有效，所以想在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搞定背景图片

也可以使用搞定

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属性

步骤2 border、cellpadding、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;


    
                                          
        
                                                Content in 1
            
                       Content in 1            
          
        
            
        
                                                Content in 2
            
                       Content in 2            
          
        
            
        
                                                Content in 3
            
                       Content in 3