Differences

This shows you the differences between two versions of the page.

--- web:email-html [2023/01/14 05:04] – created morgan0329
+++ web:email-html [2023/01/14 05:08] (current) – morgan0329
@@ Line 1: / Line 1: @@
+引用自他人 2021-08-20： https://blog.csdn.net/u014505277/article/details/119828892
+工作中常会有需求向用户发送邮件，需要前端工程师来制作html格式的邮件，但是由于邮件客户端对样式的支持有限，要兼容很多种浏览器需要注意很多原则：
+.邮件使用table+css布局
+.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。
+<code html>
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>生日祝福</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+	</head>
+	<body>
+		<div style="width: 414px;height: 736px;background-color: #f7f3f3;position: absolute;">
+			<table style="width: 100%;margin: 20px;">
+				<tr>
+					<td>
+						<img id="btn" src="https://***.com/***/assets/img/.png" width="28px" />
+					</td>
+					<td style="text-align: right;padding-right: 40px;">
+						<img width="59px" src="https://***.com/***/assets/img/.png" alt="" />
+					</td>
+				</tr>
+				<tr>
+					<td style="vertical-align: top;">
+						<div style="position: absolute;">
+							<img id="btn" src="https://***.com/***/assets/img/.png" width="63px" />
+						</div>
+						<div style="margin-top: 30px;">
+							<img id="profile" src="https://***.com/***/assets/img/.png" width="89px" style="border-radius: 50%;border: 1px solid #FFFFFF;" />
+						</div>
+					</td>
+					<td>
+						<div style="width: 80%;padding-left: 10px;color: white;">
+						</div>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</body>
+	<script type="text/javascript" charset="UTF-8">
+	</script>
+</html>
+</code>
+.不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中可以识别，但是在outlook中无法识别。
+.表格的border，使用table上的border属性，可以在qq浏览器中兼容，但是在outlook中打开是没有边框的，这种情况，我么只能给每一个td加一个border，在table中使用border-collapse:collapse;来合并重复的边框。
+<code html>
+<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
+这样设置border会在outlook中显示不出border。
+</code>
+.为了保证兼容性，建议大家把邮件设置固定宽度和高度。
+<code html>
+<div style="width: 414px;height: 736px;">
+我是邮件主体
+</div>
+</code>
+.少用img，因为很多邮箱客户端默认不显示图片，所以，如果需要图片的话，一定要写好alt和title。
+.背景图片，尽量用background-color使用纯色背景。
+.邮件不支持javascript，flash以及一些特殊的标签。
+由于邮件客户端对css支持各有不同，所以一定要多测试再发送，保证样式的正确。如果出现了不兼容的情况，一定要耐心的使用最简单的方式进行兼容，尽量少用特殊标签及比较复杂的属性。