前端编写邮件html各邮箱兼容及注意事项
近期由于项目需要，第一次编写邮件html模板，发现各种邮箱兼容问题，尤其是windows自带的邮箱outlook兼容性极差，在此简单做下记录。
注意事项（全局样式规则）
- 使用越垃圾的样式越好，绝大部分css3不兼容，不要使用高级布局，例如flex布局等。
- 通篇使用table编写，即尽量只使用table、tbody、tr、td
- 图片路径不可以使用base64，会加载不出来，宽高也不可限制，alt都会不予显示
- 邮件一定要给最外层最小高度，否则在个别邮箱中会出现滚动条
- 不要写js事件会被过滤，链接跳转使用<a.>标签代替onclick事件，outlook邮箱客户端连<a.>都不支持，只能在后面写上文字叙述（或复制链接至浏览器查看）
- 只能写行内样式（style），能用属性尽量全部用属性，同时在style里面再写一次，比如图片宽高，可以直接用height=‘20’,width=‘20’，注意不要写单位，同时在style=“height:20px,width:20px”
- table中td仅支持padding，tr既不支持padding、也不支持margin
- 所有可以连写的样式全部拆开写，例如padding：10px 20px，要写成padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px
- 行数很多的文本记得加上word-break:break-all
- outlook不能识别!important
- 为了去掉单元格之间的间隙以及边框，记得在table标签上加上cellpadding="0"和 cellspacing="0"属性，在行内样式中加上border-collapse: collapse; border-spacing: 0;
- 一个单元格内有多段文本时，尽量使用 br标签
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css"
rel="stylesheet"
/>
<title>成绩通知</title>
</head>
<body>
<table
cellpadding="0"
cellspacing="0"
style="
max-width: 700px;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e6e8ee;
border-right: 1px solid #e6e8ee;
border-bottom: 1px solid #e6e8ee;
"
>
<tbody>
<tr style="height: 40px; width: 100%; background-color: #20242c">
<td style="padding-top: 9px; padding-bottom: 5px; padding-left: 20px">
<img
height="22"
style="height: 22px"
src="https://img0.baidu.com/it/u=3072371240,760127611&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
alt="Error"
/>
</td>
<td
style="
width: 100%;
text-align: right;
vertical-align: middle;
padding-right: 20px;
"
>
<img
height="16"
style="height: 16px"
src="https://img2.baidu.com/it/u=1053999863,2498083417&fm=253&fmt=auto&app=120&f=GIF?w=607&h=500"
/>
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 18px;
font-weight: bold;
color: #2d2d2d;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
"
>
成绩通知
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-left: 20px;
line-height: 17px;
"
>
尊敬的学生家长，您好！
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
word-break: break-all;
line-height: 17px;
vertical-align: text-top;
"
>
感谢您对学校的支持，点击以下“查看详情”链接可访问具体内容，或复制链接至浏览器查看(http://www.baidu.com)。
</td>
</tr>
<tr>
<td
colspan="2"
style="padding-bottom: 60px; padding-left: 20px; height: 30px"
>
<a
href="http://www.baidu.com"
style="text-decoration: none; display: block; width: 100px"
target="_blank"
>
<table>
<tbody>
<tr>
<td
height="30"
width="100"
style="
color: #fff !important;
font-size: 12px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
);
cursor: pointer;
width: 100px;
height: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
"
>
查看详情
</td>
</tr>
</tbody>
</table></a
>
</td>
</tr>
<tr>
<td
colspan="2"
style="
color: #2d2d2d;
padding-bottom: 15px;
padding-left: 20px;
font-size: 12px;
line-height: 17px;
"
>
本邮件由系统自动发送，请勿直接回复
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 20px; padding-right: 20px">
<hr style="border-top: #eff0f5; margin: 0" />
</td>
</tr>
<tr>
<td
style="padding-left: 20px; padding-top: 16px; padding-bottom: 20px"
>
<img
style="height: 60px; width: 60px"
height="60"
width="60"
src="https://img2.baidu.com/it/u=1340460595,2858602922&fm=253&fmt=auto&app=138&f=GIF?w=511&h=500"
alt="code"
/>
</td>
<td
style="
font-size: 12px;
padding-top: 16px;
vertical-align: text-top;
color: #2d2d2d;
line-height: 20px;
padding-left: 10px;
"
>
感谢您的信任
<br />
扫描二维码联系我们
<br />
xxxxx学校
</td>
</tr>
<tr>
<td
colspan="2"
height="4"
style="
width: 100%;
height: 4px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
);
"
></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图
