outlook邮件中样式问题

目前要做一个定时发送邮件的功能，邮件的大致内容布局如下：

HTML中

在QQ邮件中，可以进行正常显示。

在outlook网页版，也可以正常显示，

outlook客户端

但是到了客户端就会出现很多很神奇的问题，基本样式全丢，浮动不支持，定位不支持，所以很多样式都乱了，后来百度一下才知道OUTLOOK是按照word的方式解析的，很多样式，标签都不支持，不支持内部样式表，所以只能写内联，等等兼容问题，这里记录一下：

首先outlook支持传统的table 布局，不支持浮动，定位布局。所以写的时候就要注意这一点。

1.内部样式表，外联样式表，JS不支持

这里写样式的话，只能写内联

2.table样式初始化，将内部边距合并

和普通浏览器一样都是为table 本身添加cellpadding="0" cellspacing="0"属性

3.border问题

给每一个td添加边框

　再通过border-collapse:collapse对边框进行合并

4.margin，padding问题
在outlook的客户端，table上下的margin 会失效，这里参考网上使用hspace和vspace，但是并没有效果，所以我采用了比较low的方式，填补了空元素来完成间隔
关于padding会自动添加，这里我为每一个td进行了样式清空 padding为0的方法来解决
5.line-height问题
mso-line-height-rule:exactly是微软的CSS属性，对其他无效，作用于块级元素
 
    
　　是excel本身的样式，单位，标签形式
兼容性：网页端和部分客户端outlook支持
最后得到了最简单的模版：
1.公用内部样式表：
 
    

 
   
2.table的内联样式（宽度根据需要定义）
 
    
 
    
    
    
    
    
    
   
 
    
   
6.浮动问题
 
   
左右浮动可以使用align="left"/"right"来实现
 
   
首先为大盒子定一个width，然后设置align="center"，里面的img 注意不要设置align="right" 就可以实现图片在width中 右浮动
 
   
7.colspan，rowspan实现问题
 
   
这个我测试了依稀，在outlook客户端是可以被识别的，所以可以继续使用该属性
 
   
8.图片问题 注意使用线上绝对路径的src值，防止图片找不到
 
   
9.对于字体居中问题
 
   
要使每一个td里面的数据都居中对齐，需要结合使用
 
   
 
    
 <td align="center" style="text-align:center;">0td>
 
   
 
   
有的不继承table中的字体居中属性，所以只能一个个设置
 
   
10.背景色问题
 
   
我曾经在网页中使用灰色作为背景，table为白色，来突出，到了客户端则全屏变为灰色，这里只要将bgcolor="#fff" 改成白色就可以了
 
   
 这里放一个相关outlook内置html的较为详细的介绍链接，方便以后查看
 
   
11.这里补充一个点  十六进制颜色 的 缩写有的outlook也是不支持的 bgcolor="#f60" 这个颜色无法识别 只能写全 #ff6600 才可以识别
 
   
2018.0515
 
   
发现了一种新模式：
 
   
用提供的表格模版.excel 另存为.html 在用编译器打开，作为模版文件 进行嵌套
 
   
部分内容展示：
 
   
 
    




html标签：
 

 
    
    
    
    
    
    
    
   
3.td内联样式（不需要每一个进行padding margin的清空 ）
 
    
   

width 内容确定 所以给了定值 rowspan colspan 跨行 跨列 bgcolor 是背景色 之后的内联样式 是根据特殊情况 字体加粗，大小等样式的控制
 
效果图：　
代码展示：
 
    

 
    
    
   
品牌事业部
 
    
    
    
    
    
   



  

    
用品系统周报表
  
  

    
 开始日期：2018/3/26   结束日期：2018/4/1
    
单位 ：元   
  
  

    
全国汇总（已切换系统）
  
  

    
品牌事业部
    
订单金额
    
销售金额
    
成本
    
毛利
    
毛利率
    
单车收入
    
单车毛利
  
  

    
本周
    
本周
    
本周
    
本周
    
本周
    
本周
    
本周
  
  

    
汇总
    
 
    
 
    
 
    
 
    
 
    
 
    
 
  
  

    
事业一部
    
 
    
 
    
 
    
 
    
 
    
 
    
 
  
  

    
事业二部
    
 
    
 
    
 
    
 
    
 
    
 
    
 
  
  

    
事业三部
    
 
    
 
    
 
    
 
    
 
    
 
    
 
  
  

    
事业四部
    
 
    
 
    
 
    
 
    
 
    
 
    
 
  
  

　　

　　

 

转载于:https://www.cnblogs.com/GoTing/p/7857175.html