edm技术调研
测试相关
|
测试工具
|
测试邮箱
|
邮件发送平台
|
|---|---|---|
| Chrome | QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | focussend邮件平台 , QQ邮箱 |
| 安卓手机 | QQ邮箱app, 网易云邮箱app | focussend邮件平台 , QQ邮箱 |
1.edm中常见兼容性叫好的html标签有哪些？
|
html标签
|
兼容性
|
注意事项
|
|---|---|---|
table |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
tbody |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
tr |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
td |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
span |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | margin-top 和margin-top会失效 |
img |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | 1.宽高用width="10" height="10" 2.图片之间 , qq 邮箱 , gmail和火狐浏览器会存在较大缝隙 , 图片设置style="vertical-align:top;display:block;border:'0'" 3.避免图片显示异常 , 加上行内样式style="display:block; width:100% !important; height:auto !important;" |
a |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | 加上属性target="_blank" |
p |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | 部分邮箱 (例如:新浪邮箱) 会将绑定的class去除 , 尽可能写行内样式 , 注意去除默认margin |
div |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | 1.部分邮箱 (例如:新浪邮箱) 会将绑定的class去除 , 尽可能写行内样式, 2.将其作为最外层父级时网易云app显示整体缩小 3.qq邮箱网页端 , 图片不显示 |
| b | QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
| i | QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 |
2、edm可用的css属性有哪些？
|
css属性
|
兼容性
|
注意事项
|
|---|---|---|
width |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
height |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
padding |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
margin |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | outlook邮箱中负值将会被去除 |
font |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
color |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
letter-spacing |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
text-decoration |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
word-wrap |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
text-align |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
line-height |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
background |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
background-image |
QQ邮箱, 新浪邮箱, 网易云邮箱 | 渐变色 :outlook邮箱会将其清除 |
border |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
border-radius |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
vertical-align |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
display |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
justify-content |
QQ邮箱, 新浪邮箱, 网易云邮箱 | outlook邮箱会将其清除 |
align-items |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
align-content |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
flex-direction |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | outlook邮箱会将其清除 ,会使邮箱中元素属性align-items ,align-content失效 |
flex |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | outlook邮箱会将其清除 |
float |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
overflow |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
border-collapse |
QQ邮箱, outlook邮箱 , 新浪邮箱, 网易云邮箱 | |
animation |
网易云邮箱app | 仅网易云邮箱app支持 |
transform |
outlook邮箱 , 新浪邮箱, 网易云邮箱 | QQ邮箱app不支持 |
position |
QQ邮箱 | outlook邮箱中被去除, 新浪邮箱将其所有样式清除 , 网易云邮箱app将其宽高去除 |
| box-shadow | QQ邮箱 ,网易云邮箱app | outlook邮箱中被去除, 新浪邮箱将其所有样式清除 , 网易云邮箱app将其宽高去除 |
兼容性细分
|
标签/css属性
|
width
|
height
|
padding
|
margin
|
font-size
|
font-family
|
color
|
letter-spacing
|
text-decoration
|
text-align
|
line-height
|
background-color
|
background-repeat
|
background-size
|
background-position
|
background-image |
background-image(径向渐变)
|
border
|
border-radius
|
overflow
|
float
|
box-shadow
|
position
|
display:flex
|
flex
|
justify-content
|
align-items
|
align-content
|
flex-direction
|
animation
|
transform
|
opacity
|
伪元素::after , ::before
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
table |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
|
|
|
|
| tbody |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
未测试 |
|
|
|
|
|
|
|
|
| tr |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| td |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
span |
未测试 |
未测试 |
|
|
|
|
|
|
|
未测试 |
|
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
|
|
未测试 |
|
|
|
未测试 | 未测试 | 未测试 | 未测试 | 未测试 | 未测试 |
|
|
|
|
| b |
未测试 |
未测试 |
|
|
|
|
|
|
|
未测试 |
|
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
|
|
未测试 |
|
|
|
未测试 | 未测试 | 未测试 | 未测试 | 未测试 | 未测试 |
|
|
|
|
| i |
未测试 |
未测试 |
|
|
|
|
|
|
|
未测试 |
|
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
|
|
未测试 |
|
|
|
未测试 | 未测试 | 未测试 | 未测试 | 未测试 | 未测试 |
|
|
|
|
img |
|
|
未测试 |
|
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 |
未测试 | 未测试 |
|
|
未测试 |
|
未测试 |
|
未测试 | 未测试 | 未测试 | 未测试 | 未测试 | 未测试 |
|
|
|
未测试 |
a |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
div |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
未测试 |
未测试 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
补充: css邮箱兼容性相关内容可参考:https://www.campaignmonitor.com/css/
-
有属性能够实现样式效果的时候尽量使用属性
-
尽量写行内样式
-
行内样式挨着写,不要换行
3、edm里的动画效果如何实现，是否可用css3？
根据上述测试 animation 兼容性较差 , 建议使用 gif 实现效果
4、edm在手机里自适应怎么做？
基于edm模板 将图片如下设置 :
<img src="https://img.hbhcdn.com/zhuanti/20937/dajiang_03.jpg" width="100% !important" height="auto !important" style="border: none;vertical-align: bottom;display: block;"> |
测试 QQ邮箱app, 网易云邮箱app , QQ , 微信 都可正常显示
5、edm中背景图如何处理？
示例:
<tr> <td align="center" style="color:#e9616b;"> <a href="https://www.jiehun.com.cn/mobile/?app_channel=laokehuedm_cddzl" target="_blank" tyle="color:#e9616b;"> <table width="750" height="54" style="max-width:750px; word-wrap: break-word;background-image: url('https://img.hbhcdn.com/zhuanti/20937/dajiang_02.jpg');background-repeat: no-repeat;background-size: 100%;" cellspacing="0" cellpadding="0" border="0" > <tr align="center" style="color:#e9616b;"> </tr> </table> </a> </td></tr> |
注: 此方法无法在QQ中打开邮件页面自适应
异常汇总
|
|
问题描述
|
问题示例
|
解决方案
|
|
|---|---|---|---|---|
|
|
问题描述
|
问题示例
|
解决方案
|
|
| 1 |
qq和腾讯邮箱app打开邮件图片(img)有滚动条 |
|
给img标签设置 width="100% !important" height="auto !important" |
|
| 2 |
图片之间 , qq 邮箱 , gmail和火狐浏览器会存在较大缝隙 |
|
img设置
|
|
| 3 |
outlook网页邮箱中, 会默认给table添加bgcolor="#0F0F0F" |
|
给子级table单独添加bgcolor |
|
| 4 |
....
;background-repeat:){kind=link}