CSS 元素无法在电子邮件中正确显示答案

【问题标题】：CSS elements not displaying properly in emailsCSS 元素无法在电子邮件中正确显示
【发布时间】：2018-07-19 02:04:23
【问题描述】：

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

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

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

编辑：我想提一下我也使用了mailchimp's CSS inliner tool，但它的输出产生了完全相同的结果。我也尝试将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>

【问题讨论】：

您可能希望在电子邮件模板中使用老式的表格布局而不是 DIV+CSS 布局，因为众所周知，电子邮件客户端对现代 CSS 的支持更差，所以规则-不使用基于表格的布局的经验不适用于电子邮件模板。
您可能想查看this link，了解在 Gmail 中使用 HTML/CSS 时的一些常见问题

标签： html css html-email

【解决方案1】：

从你的图片来看，我猜想一般的box-sizing: border-box; 属性被忽略了。所以我会尽量避免对外部容器使用bordersettings（.box），而是使用padding: 20px（与之前的边框厚度相同）和等于之前的border-color的背景颜色来获得类似边框的效果。（并删除box-sizing: border-box;）

【讨论】：

【解决方案2】：

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

https://www.campaignmonitor.com/css/box-model/box-sizing/

Outlook 对填充和边距的支持存在缺陷。

https://www.campaignmonitor.com/css/box-model/padding/

Outlook 并不真正支持<div>。

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

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

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

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

祝你好运。

【讨论】：

gwally 是对的，并非所有电子邮件客户端都支持边框。