Loading...

outlook 已知的兼容问题

发布者 milleros - 6 个月前

OutLook的宣言是不离不弃

是不是很讨厌为Email代码兼容Outlook? 太遗憾了!虽然光都有尽头,但对Outlook的代码兼容没有。

为了应付Email的怪癖,我们花了很多时间测试,确保我们搞定了所有Outlook的坑洼沟洄。在这个指导中,我们会分享一下数年来我们应付这种烦人的邮件客户端的编程经验,主要包括四个部分:

  1. Outlook必知的17个tricks
  2. 移除table间距的3种办法
  3. 移除Outlook2013图片间距
  4. Outlook 2007、2010中的CSS padding

1. Outlook必知的17个tricks

为Outlook设计就像追逐行踪飘忽的大白鲸。我们花费了数小时研究,跟踪缺陷和故障,努力在一个不完善的环境中实现像素级别的完美展示。虽然Outlook时最难啃的骨头,但是搞定它仍是当务之急。

下面是17条改善Outlook上Email的建议:

1.1 忽略图片的margin和padding

Outlook 2007-2013不支持image的margin与padding样式,必要的时候尝试hspacevspace

<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />

或者直接在图片内预留好间隙(要是遇到屏幕适配就麻烦大了)。

1.2 文本不自动折行

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

<td style="word-break:break-all;">

1.3 Outlook自动为table cell 添加1px border

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

table td { border-collapse: collapse; }

或者使用内联样式

<td style="border-collapse: collapse;">... </td>

1.4 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>

1.5 用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>

1.6 使用cellpadding和cellspacing做间距

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

如果使用table的align属性

<table align="left">

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

注意;对table的对齐属性要额外的小心,你永远不知道这会对其渲染引擎(Word rending engine)造成什么影响。因为它会有可能使用自己的定位,而不是用我们设定的对齐属性

1.7 Outlook有时会移除padding

Outlook 2007 和 2010 会把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加到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

1.8 使用 MSO 控制行高

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

<td style="mso-line-height-rule:exactly; line-height:50px;">

这只在块元素上有效,所以想在font或span中用就洗洗睡了吧,这只是微软的CSS属性,对其他客户端无效

1.9 Outlook按字面解释

确保td的rowspan属性 被设置了正确的值,大部分浏览器对错误设着的rowspan宽大处理了,但是Outlook 07 和10 会按照你声明的值解释渲染,如果声明多了就凉了,即使table中没有那么多也一样渲染

1.10 Outlook有时忽略width和height

带有width和height的块元素可能显示和预期不一致,如果水平和垂直空间时由email内容决定的,但是有时候自定义的空间和对齐不好使,所以为了最好效果,可以使用透明的图片占位或者table cell的height属性来设置宽高。

1.11 td有最矮2px的限制

在Outlook 2007和2010中,td最小高度被限制为2px,如果使用td里面是1px的透明gif和背景颜色,还会出现一个水平条

1.12 背景图片需要使用vml

在Outlook 2007、2010、2013中背景图片不使用VML的话是不起作用的。VML是一个基于XML的过时的二维矢量图形文件格式,是Office Open XML标准的一部分。这个问题很难搞定,可以看看这篇博客看看这么使用VML搞定背景图片

也可以使用Bulletproof background images搞定。

1.13 Outlook把一些div转换为p

Outlook经常会把div转换为p,这个我们真心不理解什么时候和为什么,貌似是个误无解的问题。

1.14 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别超过了,适当拆分一下,重构比较麻烦,设计的时候注意一下最好。

1.15 太高的图片会被自动剪切

在Outlook中图片最高1728px,超过1728 的部分会被截掉(怎么会有人这么丧心病狂在Email中放这么高的图片)

我们也见过Outlook自动缩小图片,使其最高位1827px

我们建议你剪裁图片,堆叠在一起

1.16 定义了尺寸的图片可能渲染不正确

拉伸图片可能不会正确的渲染,所有的图形应该使用属性来设置宽高大小。不要依赖于CSS定义图片尺寸,这点对于Email很重要

<!--有效-->
<img src="cid:ALogo" width="500" height="200">

<!--无效-->
<img src="cid:ALogo" style="width: 500px;height: 200px">

<!--无效-->
<img src="cid:ALogo" width="500px" height="200px">

1.17 带动画的gif不支持

Outlook不支持带动画的gif,只会展示第一帧,这也太TM丧心病狂了,gif图都不支持啊!!!!

2. 移除table间距的3种办法

当我们尝试左右并列table或者上下堆叠table的时候会发现Outlook 2007 和 2010 有些小问题,如果发现不想要的间距,可以看看下面的方法

步骤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间十分大的间距,下面说一下解决办法

  1. 为td添加bgcolor属性,根据你的布局选颜色
  2. 为table添加1px的border,颜色和td一样
  3. 为了适应border,减少table的宽度2px
  4. 把第一个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堆叠不起作用,最好把图片做成一个这种情况

3. 移除Outlook2013图片间距

Outlook2013填了一些坑,但又挖了新坑。堆叠的图片会显示大概10px的间距(WDNMD 这简直就是巨坑啊)。

这个问题只在图片高度小于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>

4. Outlook 2007、2010中的CSS padding

针对Outlook设计的人都很清楚已经被table绑架了,只能用很少的css,如果认为仅仅是这样,那你就太年轻了,Outlook会把你的代码转换为微软的word代码。

比如说很重要的就是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>
    </b>
</p>

反正我是没眼看了(小声哔哔)。

转换之后本来对块元素设置的css到了span上,很多就不好使了,为了避免作者建议使用margin,其实我觉得还是老老实实使用table得了

原文地址: https://www.emailonacid.com/blog/article/email-development/tips_and_tricks_outlook_07-13/

标签纵览

APP(1)SSH(1)Docker(1)Python(1)VueJS(3)Nodejs(2)Linux(5)前端(9)
Loading...