Outlook客户端解析Html类型邮件样式问题

最新推荐文章于 2023-09-29 02:16:33 发布

wh_week8

最新推荐文章于 2023-09-29 02:16:33 发布

阅读量7.1k

点赞数 5

分类专栏： CSS 文章标签： outlook页面样式错乱

本文链接：https://blog.csdn.net/u014505277/article/details/119828892

版权

前端工程师在制作HTML格式邮件时，需考虑邮件客户端如Outlook对样式的限制。文章列举了邮件制作的注意事项，包括使用table布局，内嵌CSS，避免浮动定位和绝对定位，处理表格边框，设定固定宽度和高度，谨慎使用图片和背景图片，以及避免使用javascript和特殊标签。确保多测试，以保证在各种邮件客户端中显示效果的一致性。

摘要由CSDN通过智能技术生成

工作中常会有需求向用户发送邮件，需要前端工程师来制作html格式的邮件，但是由于邮件客户端对样式的支持有限，要兼容很多种浏览器需要注意很多原则：

1.邮件使用table+css布局

2.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。

<!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;">