outlook邮件中样式错乱问题

最新推荐文章于 2023-02-17 11:22:33 发布

wh_week8

最新推荐文章于 2023-02-17 11:22:33 发布

阅读量6.7k

点赞数 1

分类专栏： CSS 文章标签： outlook outlook样式问题邮件样式问题

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

版权

在公司人力资源共享中心的邮件发送中，遇到Outlook客户端及网页版邮件展示严重变形的问题。邮件模板在不同平台渲染效果差异大，原因是Outlook的文本渲染模式。为解决此问题，建议避免使用DIV，采用TABLE布局，使用行内样式，不引用外部样式，限制某些HTML标签和属性的使用，以及插入图片而非作为背景。遵循这些规则，可以提高邮件在各种平台上的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

公司人力资源共享中心为关怀员工提出对在职员工推送生日祝福/入职周年庆祝的消息（含短信、企微、以及邮件），要求邮件和企微推送消息为网页形式展现。

现象：

邮件模板编写完成后不同的收件平台渲染的情况大相径庭，再outlook客户端以及网页版收到的邮件内容出现了严重的变形问题。如图所示（左侧为Foxmail显示、右侧为outlook显示）：

代码：

<div style="max-width: 414px;min-width: 414px;max-height:736px;min-height:736px;color: white;padding: 20px;margin: 20px;font-family: Arial, Helvetica, sans-serif;background: url(***) no-repeat;background-size:cover" >
		<div class="header" style="display: flex;">
			<div class="header_left" style="width: