应用生成邮件在Outlook中UI变形问题技术咨询

兄弟，我太懂这种Outlook邮件渲染的糟心事了！毕竟Outlook桌面版用的是Word的渲染引擎，跟浏览器的标准渲染差了十万八千里，哪怕你把CSS都内联了，还是会踩一堆坑。结合你的情况，我给你捋几个最可能的原因：

• CSS属性兼容性硬伤：Outlook对很多现代CSS属性完全不买账，比如flex、grid这些布局属性想都别想，哪怕内联也没用。还有像height: 100%这种百分比单位，Outlook桌面版根本不识别，必须用固定像素值。另外，如果你用了rgba()颜色值，Outlook会直接忽略透明度，甚至可能导致颜色不显示，得换成十六进制或者rgb()格式。还有!important也没用，Outlook直接无视这个声明。

• 表格布局细节没达标：邮件布局基本全靠表格撑着，但Outlook对表格的要求特别苛刻。比如你的.footer表格，有没有明确设置固定像素的width？用百分比宽度的话，Outlook经常会乱缩。还有单元格（td）的padding，有时候Outlook会莫名忽略，尤其是嵌套表格的时候，得确保每个td的padding都明确设置成像素值。
  至于按钮文本换行的问题，大概率是因为你用了div或者a标签做按钮——Outlook对这些元素的宽度控制很差，建议把按钮做成一个单独的表格：用一个table当按钮容器，td设置背景色、固定宽度和padding，文本直接放在td里，这样就不会随便换行了。

• 文本不可见的隐形坑：如果文本突然消失，先检查颜色是不是和背景色撞了（别笑，真的容易犯这错）。然后看字体设置，如果你用了非系统默认字体（比如一些小众的无衬线字体），又没加fallback字体（比如font-family: 'YourFont', Arial, sans-serif;），Outlook可能会把文本换成默认字体，但如果字体大小设置得太小，就可能看起来像消失了。还有行高（line-height），如果设置得比字体高度还小，文本会被截断，看起来就像没显示一样。

• DOCTYPE和HTML结构问题：邮件的DOCTYPE不能随便用HTML5的<!DOCTYPE html>，Outlook桌面版对这个兼容性很差，容易进入怪异模式。建议换成XHTML 1.0 Transitional的DOCTYPE：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  

  另外，要确保HTML结构是严格的表格嵌套，别用太多div，Outlook对div的样式支持非常有限，能不用就不用。

• 内联CSS的遗漏细节：你说已经把CSS内联了，但有没有检查一些特殊属性？比如background简写属性，Outlook只识别background-color，如果写了background: #fff url('bg.jpg') no-repeat center;，Outlook会直接忽略整个属性，得把颜色单独拆成background-color: #fff;。还有链接的颜色，Outlook会强制把未访问链接改成蓝色，除非你内联设置color和text-decoration。

最后给个小建议：测试邮件的时候，重点用Outlook桌面版（尤其是2016及以后的版本）来测，网页版Outlook的渲染反而更接近浏览器。邮件渲染的兼容性就是这么保守，尽量用表格布局的老方法准没错。

内容的提问来源于stack exchange，提问作者NG.