outlook邮件中样式错乱问题

CSS 专栏收录该内容
7 篇文章 0 订阅

场景:

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

现象:

邮件模板编写完成后不同的收件平台渲染的情况大相径庭,再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:50%;">
				<img id="btn" src="***" width="28px" />
			</div>
			<div class="header_right" style="width: 50%;text-align:right;">
				<img width="59px" src="***" alt="" />
			</div>
		</div>
		<div class="content" style="display: flex;">
			<div class="content_left" style="width: 30%;">
				<div style="position: absolute;z-index:999;">
					<img id="btn" src="***" width="63px" />
				</div>
				<div class="head_img" style="position: absolute;top: 120px;">
					<img id="profile" src="***" width="89px" style="border-radius: 50%;border: 1px solid;" />
				</div>
			</div>
			<div class="content_right" style="width: 70%;padding-left: 10px;color: white;">
				<div class="content_titile" style="font-size: 16px;padding: 26px 0px;width: 100%;">
					
				</div>
				<p class="content_p" id="greeting" style="margin: 0px;line-height: 22px;font-size: 15px;">
					111111111,
					<br /> 11111111,
					<br /> 111,
					<br /> 111~
					<br />
				</p>
				<div style="padding-top: 18px;">
					<img src="****" width="149px" />
				</div>
				<div id="cornerMark" style="text-align: right;padding-top: 40px;font-size: 14px;">**********</div>
			</div>
		</div>
	</div>

 原因:

首先这不是我写的html样式问题,而是outlook页面渲染模式类似于WORLD,即文本渲染;这方面的你去搜索就能搜到一堆这方面的吐槽。

再者,就算不考虑outlook,或者是其它邮件客户端,哪怕只是在网页上看邮件,邮件也不要用DIV去做,要用TABLE;而且也不能用外部调用样式,不能用内部页面样式,只能用行内样式;使用图片只能插入使用,不能当背景属性使用;浮动属性,ul、li、dl、dd诸如此类标签一概不能用;用了就会有很多问题。

你可以随便打开一些广告邮件基本上都符合我说的这些。

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值