时间戳

首页 > 解决方案 > CSS 元素无法在电子邮件中正确显示

html - CSS 元素无法在电子邮件中正确显示

问题描述

我正在尝试创建一个将通过电子邮件分发的服务台票证模板。通过在线遵循一些关于如何创建在不同设备和电子邮件客户端上看起来不错/一致的动态电子邮件模板的指南，我得到了以下结果： 它在浏览器中的外观

然而，当电子邮件发送出去时，它变成了这种可怕的创造，似乎不再尊重使用百分比的宽度（右侧失去它的填充）： 通过电子邮件发送时的外观

此问题在 Outlook、Gmail 和 iOS 的邮件客户端之间仍然存在。我已经确定某些内容必须被忽略或无法用于我的标头标签中的电子邮件，但无法准确确定问题所在。我将不胜感激任何洞察力或解决方案来解决这里到底发生了什么。

编辑：我想提一下，我也使用了 mailchimp 的 CSS 内联工具，但它的输出产生了完全相同的结果。我也尝试过使用style="display: block;"样式img，但是当这没有解决任何问题时，我只是删除了票头中使用的公司图像......问题仍然存在。

附上片段：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	box-sizing: border-box;
}
img {
	display: block;
}
html {
	font-family: "Lucida Sans", sans-serif;
}
.header {
	font-size: 45px;
	background-color: #bbbcbc;
	width: 75%;
	color: #000000;
	padding: 15px;
}
.box {
	width:75%;
	border: 20px solid #bbbcbc;
	margin: 0;
}
.case-number {
	font-size: 20px;
	background-color: #535659;
	color: white;
	width: 100%;
	padding: 10px;
}
.date-opened {
	font-size: 20px;
	background-color: #bbbcbc;
	color: #000000;
	width: 100%;
	padding: 10px;
}
.body {
	font-size: 20px;
	background-color: white;
	color: black;
	width: 100%;
	padding: 15px;
}
.ttable th {
	width: 20%;
	text-align: left;
	background-color: #bbbcbc;
	border: 1px solid #bbbcbc;
	padding: 5px;
	margin:0;
}
.ttable td {
	width: 60%;
	border: 1px solid #bbbcbc;
	padding: 5px;
	margin:0;
}
.footer {
	width: 100%;	
	background-color: #bbbcbc;
	color: black;
	text-align: center;
	padding-top: 20px;
}

</style>
</head>
<body>

<div class="header">
	<img src="" style="display: block;"/>
</div>
<div class="box">
	<div class="case-number">Case Number: 123456</div>
	<div class="date-opened">Date Opened: 14 June 2018 at 12:00 PM</div>
	<div class="body">
		You are receiving this email because your case has been updated. Your case details and any updates can be found below this message. 
		<br></br>
		If you wish to post a comment to the case you can simply reply to this email and your case will be updated.
		If you would like to include a screenshot or relevant log files you can do so by including them in your reply. 
		<br></br>
		[progress bar goes here]
		<br></br>
		In order to proceed with your case we will need additional information or clarification on the reported issue. 
		Please provide the requested information within the next 4 days. 
		If no response is received during this time we will temporarily archive your case. 
		Once you are ready to continue with simply reply to one of the case emails.
		<br></br>
		<div class="ttable">
			<table>
				<tr>
					<th>Subject</th>
					<td>TICKET SUBJECT HERE</td>
				</tr><tr>
					<th>Description</th>
					<td>TICKET DESCRIPTION HERE</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="footer">
		
	</div>
</div>


</body>
</html>

标签： htmlcsshtml-email

解决方案

许多电子邮件客户端不支持 Box-sizing。我会考虑替代方案。

Outlook 对填充和边距有错误的支持。

Outlook 并不真正支持<div>.

在宽度方面，Outlook 对文档内样式表的支持有些参差不齐。设置硬值width="600"通常比width="100%". 您仍然可以声明width: 100% !important;大多数现代电子邮件客户端（如 IOS）将使用的内联或文档内，但 Outlook 往往会忽略。

Outlook 桌面忽略@media查询。此外，Android 也是如此。因此，您可以指定 Gmail、IOS 和其他客户端将使用的特定 css 值。

如果您在表格中内联背景颜色或使用<table bgcolor="#ff0000">Android 和 Outlook 将选择颜色。

一般来说，您的模板看起来不错。它只需要微调才能更好地工作。

祝你好运。

推荐阅读