Outlook HTML渲染引擎
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
<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />
或者为图片本身添加额外的空间(这个台low了,实在不推荐)
文本不自动折行
对于table中的文字,比如aaaaaaaaaaaaaaaaa
,如果希望它们自动折行,需要这样
<td style="word-break:break-all;">
下面的例子对比一下就看到效果了

Outlook自动为table cell 添加1px border
如果table使用了背景颜色可以看到td
有1px的白边,在内嵌的style中加入样式
table td { border-collapse: collapse; }
或者使用内联样式
<td style="border-collapse: collapse;">... </td>
Outlook有时忽略link的样式
如果a标签没有href
属性,那么Outlook 2007和 2013将不支持其内联样式
<a style="font-size: 20px; color: #004990;">Shop Flooring </a>
这种没有作用,应该修改为
<a href="http://www.test.com" style="font-size: 20px;
color: #004990;">Shop Flooring </a>
间距很重要的话用table实现
Email中最安全的呈现间距就是使用table
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td>Test</td>
</tr>
<tr>
<td valign="top">1.</td>
<td>Test</td>
</tr>
</table>
使用cellpadding和cellspacing做间距
不要在table上使用margin
和padding
,cellpadding和cellspacing是比较安全的方式,可以达到padding和margin的效果
如果使用table的align
属性
<table align="left">
情况会有些小复杂,后续提到
注意;对table的对齐属性要额外的小心,你永远不知道这会对其渲染引擎(Word rending engine)造成什么影响。我们见识过它会尝试使用自己的定位
Outlook有时会移除padding
Outlook 07 和 10 会把div
和h1~h6
转换为p
并包裹上span,这个会把html的容器从块元素转换为内联元素
<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
NEW FASHIONS
</h2>
会被转换为
<p class= style='mso-outline-level:3'>
<b>
<span style='font-size:11.5pt'>
NEW FASHIONS<o:p></o:p>
</span>
</b>
</p>
下面的例子可以看到padding设置在Thunderbird上有效,Outlook 2007上无效

一个解决办法就是把padding加到td上
<td style="padding: 17px 0 0 0">
<h2 style="font-size: 15px; font-weight: bold; margin: 0">
NEWFASHIONS
</h2>
</td>
另外一个解决办法就是不使用div和h1~h6,使用p
使用 MSO 控制行高
在使用行高前添加mso-line-height-rule:exactly
<td style="mso-line-height-rule:exactly; line-height:50px;">
这只在块元素上有效,所以想在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搞定背景图片
也可以使用Bulletproof background images搞定

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
属性
<style type="text/css">
table {border-collapse: collapse;}
</style>

步骤2 border、cellpadding、cellspacing设为0
<table border="0" cellpadding="0" 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;
<style type="text/css">table {border-collapse: collapse;}</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
<tr>
<td bgcolor="#00CC99">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 1</p>
</td>
</tr>
<tr>
<td bgcolor="#00CC99">Content in 1</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
<tr>
<td bgcolor="#33FFFF">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 2</p>
</td>
</tr>
<tr>
<td bgcolor="#33FFFF">Content in 2</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
<tr>
<td bgcolor="#993366">
<p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 3</p>
</td>
</tr>
<tr>
<td bgcolor="#993366">Content in 3</td>
</tr>
</table>
</td>
</tr>
</table>
关于这种方法的说明
- 这个问题只会在在table的align被设置为left|right的时候发生
- 只需要把第一个td的内容用p包裹
- 如果table cells有不同颜色就得再套一层table了
- 这种方法对于image堆叠不起作用,最好把图片做成一个这种情况
移除Outlook2013图片间距
Outlook2013填了一些坑,但又挖了新坑。堆叠的图片会显示大概10px的间距

这个问题只在图片高度小于20px的时候出现,开心的是通过简单的小技巧就可以解决:为td设置和图片高度一样的行高
虽然作者说不知道为什么,我们可以大胆猜测一下,image时行内元素,Outlook为td设置了1.3之类的行高,这样上下就会有间距,设了行高就行了,也有人提到行高设为0或者image设为display:block
都能解决
<td width="600" height="80" style="line-height: 80px;" >
<img height="80" src="http://www.website.com/images/Nature_01.jpg"
width="600" />
</td>
Outlook 2007、2010中的CSS padding
针对Outlook设计的人清楚已经被table绑定了,只能用很少的css,但是你可能不知道Outlook会把你的代码转换为微软的代码
比较重要的一个就是Outlook经常去掉div核h1~h6,换为p和span,有时候保留外部的container有时候删除
<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0
0 0;">NEW FASHIONS</h2>
<div style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">NEW FASHIONS</div>
<p style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">NEW FASHIONS</p>
会转换为
<style>
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
h2
{mso-style-priority:9;
mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-link:"Heading 2 Char";
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
mso-pagination:widow-orphan;
mso-outline-level:2;
font-size:18.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
p
{mso-style-noshow:yes;
mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
</style>
<h2 style='margin:0in;margin-bottom:.0001pt'>
<span style='font-size:11.5pt; mso-fareast-font-family:"Times New Roman"'> NEW FASHIONS
<o:p></o:p>
</span>
</h2>
<div>
<p class=MsoNormal>
<b>
<span style='font-size:11.5pt;mso-fareast-font-family:"Times New Roman"'>
NEW FASHIONS
<o:p></o:p>
</span> </b>
</p> </div><
<p style='margin:0in;margin-bottom:.0001pt'> <b>
<span style='font-size:11.5pt'> NEW FASHIONS
<o:p></o:p>
</span>
转换之后本来对块元素设置的css到了span上,很多就不好使了,为了避免作者建议使用margin,其实我觉得还是老老实实使用table得了
Outlook HTML渲染引擎的更多相关文章
- [转]Outlook HTML渲染
转自:http://www.cnblogs.com/dolphinX/p/4081828.html 是不是很讨厌为Email代码兼容Outlook? 太遗憾了!虽然光都有尽头,但Outlook始终存在 ...
- 浏览器渲染引擎,提高css渲染速度。
一.渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上.默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 二.各种渲染引擎我 ...
- 【repost】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
- 浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具 [2]常见引擎 渲染引擎: fire ...
- [比较老的文章]三维渲染引擎 OGRE 与 OSG 的比较综述
1 .引言随着计算机可视化.虚拟现实技术的飞速发展,人们对实时真实感渲染以及场景复杂度提出了更高的要求.传统的直接使用底层图形接口如OpenGL.DirectX开发图形应用的模式越来越暴露出开发复杂性 ...
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
- 渲染引擎之Camera
Camera, 在游戏渲染引擎里面, 如果摄影师的眼睛, 它决定了观众可以看到的游戏内容.从3D技术角度讲,Camera就是如何计算视图矩阵view matrix的模块(这里不讨论透视的方法),无论是 ...
- 【转】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
- Blink: Chromium的新渲染引擎
编自http://www.chromium.org/blink 关于blink Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS ...
随机推荐
- 1.Linux常用命令
命令名称:ls 格式: ls [-选项] [参数] 注:中括号表示可选 命令路径:/bin/ls 功能描述:显示信息 例如: 选项 -a 显示所有的文件,包括隐藏文件,(以 . 开头的文件) -l ...
- docker 实践笔记
开机默认启动docker 服务:vim /etc/rc.local 末尾加上service docker start 查看docker镜像:docker images 运行docker:
- c:out标签和el表达式与跨域攻击XSS
很多时候,在JSP中我们喜欢用EL表达式输出信息,但是最近发现这个确实存在个问题:XSS即跨域攻击. 下面看个例子: <c:out value="${student.name}&quo ...
- 用div加css做表格去掉外围边框
通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...
- 从零开始山寨Caffe·柒:KV数据库
你说你会关系数据库?你说你会Hadoop? 忘掉它们吧,我们既不需要网络支持,也不需要复杂关系模式,只要读写够快就行. ——论数据存储的本质 浅析数据库技术 内存数据库——STL的map容器 关 ...
- C#调用win32 api程序实例
1.声明static extern 方法,使用DllImport特性 class MyClass { [DllImport("kernel32", SetLastError = t ...
- db2基础
DB2知识文档 一.db2 基础 基本语法 注释:"--"(两个减号) 字符串连接:"||" 如set msg='aaaa'||'bbbb',则msg为'aaa ...
- CentOS 简单设置samba服务
1.安装 yum -y install samba 2.设置配置文件 1) 备份Samba的配置文件:cp /etc/samba/smb.conf /etc/samba/smb.conf.bak ...
- CSS 一些知识点
- 为什么要用elasticsearch-理解加深中
首先的概念 基于Lucene 分布式实时文件存储 实时的分析搜索引擎 能达到实时搜索 优势的地方 1.横向可扩展性:只需要增加一台服务器,做一点儿配置,启动一下ES进程就可以并入集群: 2.分片机制提 ...