Question

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

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

Outlook，Gmail和iOS的Mail客户端之间仍然存在此问题。我已经确定必须忽略某些消息，或者某些消息不能用于标题标签中的电子邮件，但无法准确确定问题所在。任何解决此问题的见解或解决方案，我将不胜感激。

编辑：我想提一提，我也使用过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>

Answer 1

从您的图像来看，我猜想一般的var1=$(ls | grep "foo") var2=$(ls | grep "bar") common=$(comm -1 -2 <($var1) <($var2)) echo "$common"属性会被忽略。因此，我将尽量避免对外部容器（box-sizing: border-box;）使用border设置，而应使用.box（与先前的边框粗细相同）和与先前的{ {1}}以获得类似边框的效果。（并删除padding: 20px）

Answer 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 Desktop忽略@media个查询。此外，Android也是如此。因此，您可以指定Gmail，IOS和其他客户端将使用的特定css值。

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

通常，您的模板看起来不错。只需进行微调即可更好地工作。

祝你好运。

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

2 个答案: