【发布时间】：2021-04-23 11:33:45
【问题描述】：
我已经阅读了大量不同的类似问题和答案，并且我了解电子邮件客户端存在大量兼容性问题。我还使用 mailchimp 兼容性指南构建了我的电子邮件，使用 table istead of 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 电子邮件。
【问题讨论】：
-
"但随后在电子邮件上" — 您使用的是哪个电子邮件客户端？
-
同意，关于哪个电子邮件客户端会有帮助的更多上下文。
-
@Quentin，电子邮件客户端与此处无关：理想情况下，电子邮件应该在任何客户端上都可以阅读。仅供参考，例如使用 Thunderbird 给出的结果与此处显示的结果相同
-
@julien.giband — 电子邮件客户端是相关的，因为 Stackoverflow 问题需要聚焦。 “我如何解决这个电子邮件客户端中的这个特定布局问题？”是一个很好的问题，而“我如何解决所有电子邮件客户端的这一系列布局问题？”不是。
标签： html css email html-email