我已经阅读了大量不同的类似问题和答案,我知道电子邮件客户端存在大量兼容性问题。我还使用 mailchimp 兼容性指南构建了我的电子邮件,使用 table 代替 div 等...
在 codepen 上看起来是这样的(细微差别,因为不完全是最新的)-
https://codepen.io/Wrecket/pen/MWJzNrR
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title></title>
<style>
body {
background-color: white;
font-family: Nunito, Montserrat, monaco,Consolas,Lucida Console,monospace;
}
.col-8{
width:700px;
}
table{width:100%; border-spacing: 0px;}
.content{
background-color: white;
padding:0px 85px 75px 85px;
font-size: 16px;
}
.line{
border-top:1px solid #ddd;
}
.socialImage{
padding-top: 3rem;
}
</style>
</head>
<body style="background-color: black; padding: 3rem 10rem;">
<table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
<tr>
<td>
<i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
</td>
</tr>
<tr>
<td colspan="2">
<h1>Booking Confirmed</h1>
</td>
</tr>
<tr>
<td>
<p>booking for <span style="font-weight: bold">User Name </span> has been confirmed </p>
</td>
</tr>
<tr>
<td style="padding: 5rem 5rem;background-color:#f2f2f2;border-radius: 8px;">
<table>
<tr style="text-align: left">
<td colspan="2">
<p style="font-weight:bold">Signup Name</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td></td>
<td>
<p style="font-weight:bold">Total</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<td style="height: 5rem; background-color:black; width: 100%;"></td>
</table>
<table class="content" style="border-radius: 18px 18px;">
<tr>
<td style="text-align: right;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style=" display: block;">
</a>
</td>
<td style="text-align: left;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style=" display: block;">
</a>
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%; text-align:center;">
<p>
Please do not reply directly to this email. If you have any questions or comments regarding this email, please contact us at support@plawaze.com
</p>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<img style="height: 4rem;" src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png">
</td>
</tr>
<tr>
<td colspan="2" style="height: 1rem; width: 100%"></td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Copyright ©2021 Playwaze
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Contact us:
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
</td>
</tr>
</table>
<!--<div class="booking-container-summary">
<div class="booking-summary">
<div class="booking-summary-name ">
@Model.ActivityName
</div>
<div class=" booking-summary-price">
@Model.Price
</div>
<div class="booking-date booking-summary-date">
@Model.GroupPlayDate
</div>
<div class="booking-address booking-summary-address">
@Model.Location
</div>
</div>
</div>
<br><br>
<div style="width:100%;" class="booking-container-mobile-bottom">
<div class="total-price-grid booking-price">
<div>
@Model.TotalPrice
</div>
</div>
<td class="content footer" style="padding-top:15px; padding-bottom:0px;">
<table>
<tr>
<td align="right" valign="top" style=" width: 50%; padding: 10px 10px 10px 0px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; direction: ltr;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style=" display: block;">
</a>
</td>
<td align="left" valign="top" style=" width: 50%; padding: 10px 10px 10px 0px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; direction: ltr; ">
<a style=" text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style=" display: block;">
</a>
</td>
</tr>
</table>
</td>
<td></td>
<p class="sans outro">
Please do not reply directly to this email. @Model.Text
</p>
<td class="contactsection">
<span class="footerlogo"></span>
<p class="sans contact" style="margin:0px">
Copyright @ 2019 Playwaze
<br>
Contact Us:
<br>
First Floor, Steward House, 14 Commercial Way, Woking, GU21 6ET
</p>
</td>
</div>-->
</body>
</html>
但是在电子邮件上它看起来像这样 -
我完全明白这是某个地方的兼容性问题,但谁能帮我确定在哪里?这是我第一次(希望是最后一次)尝试创建 html 电子邮件。
答案 0 :(得分:1)
当您将电子邮件编辑为 HTML 时,您必须考虑旧版本的 HTML,例如 HTML 4 及更低版本。此外,出于明显的安全原因,电子邮件客户端在下载哪些相关资源方面存在一些限制。
通过删除 HTML5 DOCTYPE
声明、链接字体和链接样式表,并清理内联声明,我得到以下代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
background-color: white;
font-family: Nunito, Montserrat, monaco, Consolas, Lucida Console, monospace;
}
.col-8 {
width: 700px;
}
table {
width: 100%;
border-spacing: 0px;
}
.content {
background-color: white;
padding: 0px 85px 75px 85px;
font-size: 16px;
}
.line {
border-top: 1px solid #ddd;
}
.socialImage {
padding-top: 3rem;
}
</style>
</head>
<body style="background-color: black; padding: 3rem 10rem;">
<table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
<tr>
<td>
<i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
</td>
</tr>
<tr>
<td colspan="2">
<h1>Booking Confirmed</h1>
</td>
</tr>
<tr>
<td>
<p>booking for <span style="font-weight: bold">User Name </span>
has been confirmed </p>
</td>
</tr>
<tr>
<td style="padding: 5rem 5rem;background-color:#f2f2f2; border-radius: 8px;">
<table>
<tr style="text-align: left">
<td colspan="2">
<p style="font-weight:bold">Signup Name</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td></td>
<td>
<p style="font-weight:bold">Total</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<td style="height: 5rem; background-color:black; width: 100%;"></td>
</table>
<table class="content" style="border-radius: 18px 18px;">
<tr>
<td style="text-align: right;">
<a style="text-decoration: none;display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt=""
src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style="display: block;">
</a>
</td>
<td style="text-align: left;">
<a style="text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt=""
src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style="display: block;">
</a>
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%; text-align:center;">
<p>
Please do not reply directly to this email. If you have any questions or
comments regarding this email, please contact us at support@plawaze.com
</p>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<img style="height: 4rem;"
src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png">
</td>
</tr>
<tr>
<td colspan="2" style="height: 1rem; width: 100%"></td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Copyright ©2021 Playwaze
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Contact us:
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
</td>
</tr>
</table>
</body>
</html>
它给出的结果没有图标或花哨的字体,但更接近您正在寻找的内容。您或许可以通过使用标准字体(Helevetica Arial ?)和嵌入的图标图像来进一步实现您的目标
现在,如果您希望能够调试它,您还需要编写更简洁的代码:
<style>
元素中的 CSS(最好)或内联声明; 不是两者最后,使用旧的 HTML 标签并不一定意味着到处都有表格。您可以使用表格进行布局,因为它可以帮助您将文档部分居中和隔开,但每个单元格内都有公共块。代码将更简洁,因此对于人类和电子邮件客户端来说更易于阅读...
编辑 还有一点:根据您的电子邮件正文的编码方式,您可能会遇到以“.”开头的 CSS 行的问题。我找到的唯一解决方法是避免以点开头的行,例如重写所有 CSS 行,如
.col-8 {
进入
*.col-8 {
或将整个电子邮件正文包含在带有 <div>
的 id
中,并使用此 ID 为每个 css 规则添加前缀,这也有助于网络邮件客户端将您的 CSS 与站点的 CSS 分开