CSS元素无法在电子邮件中正确显示 [英] CSS elements not displaying properly in emails
问题描述
我正在尝试创建将通过电子邮件分发的服务台票证模板.通过在线遵循一些指南，了解如何创建动态电子邮件模板，这些模板在不同的设备和电子邮件客户端上看起来很好/一致，我得到了以下结果:
I'm trying to create a service desk ticket template that will be distributed via email. By following a few guides online on how to create dynamic email templates that will look good/consistent on different devices and email clients, I've come with this result:
但是，当电子邮件发送出去时，它变成了这种可怕的创造，似乎不再尊重使用宽度百分比(右侧丢失了其填充):
However, when the email is sent out, it becomes this horrid creation, seeming to no longer respect using percentages for width (the right side loses its padding):
Outlook，Gmail和iOS的Mail客户端之间仍然存在此问题.我已经确定必须忽略某些消息，或者某些消息不能用于标题标签中的电子邮件，但无法准确确定问题所在.我希望能提供任何见解或解决方案来解决这里的问题.
This problem persists between Outlook, Gmail, and iOS's Mail client. I've established that something must be getting ignored or is unusable for emails in my header tag, but cannot identify exactly what the issue is. I would appreciate any insight or solutions to resolve what exactly is breaking here.
我想提一提，我还使用了 mailchimp的CSS内联工具 ，但输出结果完全相同.我还尝试过将style="display: block;"用作img样式，但是当该方法无济于事时，我只是删除了票证标题中使用的公司形象...，问题仍然存在.
I wanted to mention I have also used mailchimp's CSS inliner tool, but the output of that yielded the exact same results. I have also tried using style="display: block;" for the img styles, but when that resolved nothing I simply removed the company image that was used in the header of the ticket... and the problem persisted.
附加的代码段:
<!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>
推荐答案
许多电子邮件客户端不支持Box-Sizing.我会考虑替代方法.
Box-sizing is not supported by many email clients. I would consider alternatives.
Outlook具有对填充和边距的错误支持.
Outlook has buggy support for padding and margin.
Outlook并不真正支持<div>.
Outlook doesn't really support <div>.
在宽度方面，Outlook对文档内样式表有些支持.设置硬值width="600"通常将比width="100%"更好.您仍可以声明大多数现代电子邮件客户端(如IOS)将使用的在线或文档width: 100% !important;，但是Outlook往往会忽略它.
Outlook has some spotty support for in-document style sheets when it comes to width. Setting a hard value width="600" will generally work better than width="100%". You can still declare either in-line or in-document width: 100% !important; which most modern email clients like IOS will use, but Outlook tends to ignore.
Outlook Desktop会忽略@media查询.此外，Android也是如此.因此，您可以指定Gmail，IOS和其他客户端将使用的特定css值.
Outlook Desktop ignores @media queries. In addition, so does Android. So you can specify specific css values that Gmail, IOS and other clients will use.
如果您在表格中插入背景颜色或使用<table bgcolor="#ff0000"> Android，则Outlook和Outlook将选择颜色.
If you inline the background colors in the tables or use <table bgcolor="#ff0000"> Android and Outlook will pick up the colors.
通常，您的模板看起来不错.只需进行微调即可更好地工作.
In general, your template looks good. It just needs fine-tuning to work better.
祝你好运.
这篇关于CSS元素无法在电子邮件中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
