HTML电子邮件卡在Apple邮件中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML电子邮件卡在Apple邮件中相关的知识，希望对你有一定的参考价值。
html初学者。我已经创建了这个html电子邮件，在雷鸟中显示完全正常和中央，但在Apple Mail中，它被卡在右边，任何人都有任何想法？ this is the email in apple mail that is aligned to the right - I want it in the centre!
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<title>Fusion CSA Accept Email</title>
<style type="text/css">
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<th>
<img src="http://fusiondiscordbots.com/Email Images/icon.png" height="50px" width="100px">
<h1 style="font-family: SinkinSans 300Light; font-size: 250%;">Thanks for applying</h1>
</th>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; Margin-top: 20px;">Hi [INSERT NAME],</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">We would like to thank you for your applciation to become a Fusion Customer Support Agent. After carefully reviewing your application, we have decided to <font color="green"><i><b>Accept</b></i></font> your application. We look forward to welcoming you to the team and working with you in the future.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">In the next 48 hours, we will send you some information about your role. In this information will be some terms that we require you to accept by emailing us back. Once the terms have been accepted, we will announce your new position to the server and give you your new role.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">Well all thats left to say is... Congratulations!</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">With appreciation,</p>
<img src="http://fusiondiscordbots.com/Email Images/seansignature.png" height="50px">
<p style="width: 50%;">Sean Hatch<br>
Fusion Managing Director</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CENTERED WHITE CONTAINER -->
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
我只是希望能够将此电子邮件发送给几个人，但我希望它看起来很专业，并且排在所有电子邮件客户端的中心。如果有人可以提供帮助，我们将不胜感激。谢谢，Sean。
答案
您在Litmus看到的每个Apple和IOS电子邮件客户端中都可以看到您的电子邮件。徽标和“感谢申请”不在雅虎中心！邮件。
最大的问题是您没有正确格式化徽标和签名图形的高度和宽度。
而不是这个：
icon.png" height="50px" width="100px"
做这个：
icon.png" height="50" width="100"
Outlook不了解height="50px"所以图像是电子邮件宽度的大小。修复并向徽标的表格单元格添加中心标记可使您的电子邮件看起来非常适合您的收件人。
祝他们的新工作[INSERT NAME]好运。
以上是关于HTML电子邮件卡在Apple邮件中的主要内容，如果未能解决你的问题，请参考以下文章