【发布时间】：2021-11-17 17:34:29
【问题描述】：
我有一个使用 nodemailer 发送电子邮件的 nodejs 程序。起初，我只有一个简单的表格，其中包含一些数据和边框颜色等的最小样式，但现在我想在电子邮件中添加更多内容。
我写了一些 html 代码并通过网络浏览器查看它，完成后，我将 html 代码添加到电子邮件文本中。
但是在给自己发了一封测试邮件后，我发现这封邮件和我在网络浏览器中看到的很不一样。
我已经研究过了，例如，html 电子邮件完全支持 heigth，所以我不明白为什么样式很不合适。我现在唯一不能工作的是“背景图片”。
这是我的html代码：
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td {
border-bottom-style: solid;
border-color: #dddddd;
border-bottom-width: 1px;
text-align: left;
padding-top: 13px;
padding-right: 14px;
}
th {
padding: 8px;
}
.image {
width: 293px;
height: 80px;
background-image: url(data:image/png;base64, DATA);
background-size: contain;
margin: 0 auto;
}
.topper {
background-color: #003d8f;
width: 100%;
height: 80px;
color: white;
font-family: sans-serif;
text-align: center;
}
.topper h1 {
padding-top: 20px;
}
.content {
margin: 0 auto;
width: fit-content;
}
.footer p {
width: fit-content;
margin-left: auto;
margin-right: auto;
color: gray;
font-size: small;
}
</style>
</head>
<body>
<div class="topper">
<h1>Some Text Here</h1>
</div>
<br />
<div class="content">
<div class="image"></div>
<br />
<br />
<br />
<table>
<tr>
<td>Table:</td>
<td><b>DataDataDataDataDataData</b></td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>Data</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
<tr>
<td>Table:</td>
<td>DataDataDataDataDataData</td>
</tr>
</table>
<br />
<br />
</div>
<br />
<br />
<br />
<hr/ style="border-top: 1px solid #e2e1e1; border-left: 0px">
<div class="footer content">
<p>Here is a longer sentence. Here are a few information about the email.</p>
<p>Here is a longer sentence. Here are a few information about the email. This sentence is even longer but it should be.</p>
</div>
</body>
</html>这就是电子邮件的样子：
知道如何更改此代码以使其在 html 电子邮件中正常工作吗？
编辑： 不起作用的事情：
-
.topper未设置为高度：80px .image不加载背景图片table和p元素未以margin: 0 auto;width: fit-content;居中p元素不小且灰暗-
hr元素看起来不对
编辑： 我发现了一个非常有用的电子邮件客户端支持和不支持的样式规则集合：https://www.campaignmonitor.com/css/
编辑：
我将.footer p { 更改为p{，并将font-size: small 更改为font-size: 14px，现在底部文本的大小和颜色都正确。
编辑：
我将table{、.image 和p display: inline-block; 和text-align: center; 给.content{，现在它们居中
编辑：
像footer content 这样的多类也不起作用。将其更改为仅 content 确实使 p 居中
编辑：
从.image{ 中删除background-image 和background-size 并将div 更改为img。将 cid:logo 添加为 src 并将此代码添加到 nodemailer：
attachments: [{
filename: 'logo.png',
path: __dirname + "\\logo.png",
cid: "logo"
}]
让你显示图像
【问题讨论】：
-
请注意，电子邮件客户端仅支持 70% 的头部样式。如果您想要对电子邮件模板的最佳兼容支持，请使用内联样式。
-
@tacoshy 好的，我将来会改变它。但是现在为了测试，outlooks 似乎使用了标题样式。
标签： html css email html-email nodemailer