如何解决Apple MAC Mail 客户端中的电子邮件模板问题
我为我的一位客户开发了一个电子邮件模板，该模板在 Outlook 和 Gmail 中运行良好，但我在 Apple mac 邮件客户端中遇到了图像显示问题
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" dir="ltr" lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<Meta name="x-apple-disable-message-reformatting" />
<Meta name="format-detection" content="date=no">
<Meta name="format-detection" content="telephone=no">
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>New Publication</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<style type="text/css">
#outlook a {
padding: 0;
}
body,table,td,a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
img[src*="c_pixel"] {width:0px;height:0px;display:block;}
table {
border-collapse: collapse !important;
}
.call-action-btn tr td:hover{Box-shadow: none !important;text-decoration: none !important;}
.call-action-btn tr td:active{Box-shadow: inset 0 3px 0 0 #c66206 !important;}
.call-action-btn tr td a:visited{color:#ffffff !important;}
.container-table {
text-decoration:none;
position:relative;
}
.container-table{position:relative;}
@media screen and (max-width: 660px) {
.container-table {
width: 100% !important;
}
.column {
width: 100% !important;
table-layout: fixed !important;
display: block !important;
padding-right: 0px !important;
padding-left: 0px !important;
margin-bottom: 0.625em;
}
.column-half{
width: 50% !important;
table-layout: fixed !important;
padding-right: 0px !important;
padding-left: 0px !important;
margin-bottom: 0.625em;
}
.f-column-half{
width: 50% !important;
table-layout: fixed !important;
padding-right: 0px !important;
padding-left: 0px !important;
margin-bottom: 0.625em;
}
.hide1 {
width: 100% !important;
table-layout: fixed !important;
display: none !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
.column-text-center {
width: 100% !important;
table-layout: fixed !important;
display: block !important;
padding-right: 0px !important;
padding-left: 0px !important;
margin-bottom: 0.625em;
text-align: center !important;
}
.padding0px8px {
padding: 0 8px !important;
}
.pd_lr10{padding-left:10px !important; padding-right:10px !important;}
.pd_lr15{padding-left:15px !important; padding-right:15px !important;}
.pd_lr20{padding-left:20px !important; padding-right:20px !important;}
.mo-height-auto{height:auto !important;}
.mo-pd{height:auto;padding-top:100%;}
.fullheight {height: auto !important;}
.pb-0{padding-bottom:0 !important;}
.m-auto{margin:auto;}
.pt-0{padding-top:0 !important;}
.tbl-fullwidth{width: 100% !important;}
.mo-tbl-center{width: 150px; margin: auto;}
.social-icon{width: 18px !important;}
.mo60{width: 60px !important;padding-right: 10px!important;}
.mo-fsize{font-size: 12px !important;}
.w60{width: 60% !important;}
.w40{width: 40% !important;}
.pt10{padding-top: 10px !important;}
/*.mo-whitebg{background-color: #ffffff !important;}*/
.mobg-size{background-size: contain !important;}
}
</style>
</head>
<body bgcolor="#F0F0F0" style="margin:0;padding:0;background:#F0F0F0;">
<!--[if mso]>
<style type="text/css">
body,p,span,a,h1,h2,h3,h4,h5,h6,strong,small,i,em,sub,sup,b,u,s,ul,li,ol{font-family: Arial,Helvetica,sans-serif !important;}
</style>
<![endif]-->
<table width="100%" bgcolor="#F0F0F0" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;min-width:300px; font-size:16px;">
<tr>
<td class="center" valign="top">
<table width="640" align="center" border="0" cellpadding="0" cellspacing="0" class="container-table" style="width:640px;margin:0 auto;">
<tr>
<td style="padding: 20px;" class="pd_lr10">
<table width="100%" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="border: 1px solid #cbd6e2;">
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0 20px;" class="pd_lr10">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="https://cdn2.hubspot.net/hubfs/8531059/P071811PS-0254_5951720542-scaled.jpg" bgcolor="ffffff" valign="top" width="100%" style="width:100%; background-repeat:no-repeat; background-color:#ffffff;background-size:100%; background-position:center bottom;" class="mobg-size">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:558px;height:427px;">
<v:fill type="tile" src="https://cdn2.hubspot.net/hubfs/8531059/P071811PS-0254_5951720542-scaled.jpg" color="#ffffff" style="background-position:center bottom;" />
<v:textBox inset="0,0">
<![endif]-->
<div>
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" align="left">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="mo-whitebg">
<tr>
<td dir="ltr" width="50%" valign="top" class="w60">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" width="80" valign="top" style="padding-right: 18px;" class="mo60">
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr">
<img width="80" src="https://cdn2.hubspot.net/hubfs/8531059/logo-ratina.jpg" alt="rachel-adams" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/>
</td>
</tr>
</table>
</td>
<td dir="ltr" valign="top">
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" style="padding-top: 17px;" class="pt10">
<strong class="mo-fsize" style="font-family: Arial,sans-serif; font-weight:bold; color:#000000; font-size:14px; line-height:18px; text-align: left;">Rachel Adams</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td dir="ltr" width="50%" valign="top" style="padding: 0;" class="w40">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" align="right" style="padding: 15px 0 0 0;" class="pt10">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="social-icon" dir="ltr" style="padding-left: 5px;">
<a href="#"><img width="25" src="https://hs-8531059.f.hubspotfree.net/hs/hsstatic/TemplateAssets/static-1.24/img/hs_default_template_images/modules/Follow+Me+-+Email/facebook_circle_color.png" alt="facebook_circle_color" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
<td class="social-icon" dir="ltr" style="padding-left: 5px;">
<a href="#"><img width="25" src="https://hs-8531059.f.hubspotfree.net/hs/hsstatic/TemplateAssets/static-1.24/img/hs_default_template_images/modules/Follow+Me+-+Email/twitter_circle_color.png" alt="twitter_circle_color.png" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
<td class="social-icon" dir="ltr" style="padding-left: 5px;">
<a href="#"><img width="25" src="https://hs-8531059.f.hubspotfree.net/hs/hsstatic/TemplateAssets/static-1.24/img/hs_default_template_images/modules/Follow+Me+-+Email/linkedin_circle_color.png" alt="linkedin_circle_color" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
<td class="social-icon" dir="ltr" style="padding-left: 5px;">
<a href="#"><img width="25" src="https://hs-8531059.f.hubspotfree.net/hs/hsstatic/TemplateAssets/static-1.24/img/hs_default_template_images/modules/Follow+Me+-+Email/instagram_circle_color.png" alt="instagram_circle_color" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
<td class="social-icon" dir="ltr" style="padding-left: 5px;">
<a href="#"><img width="25" src="https://hs-8531059.f.hubspotfree.net/hs/hsstatic/TemplateAssets/static-1.24/img/hs_default_template_images/modules/Follow+Me+-+Email/youtube_circle_color.png" alt="youtube_circle_color" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="#" target="_blank"><img width="558" height="372" src="https://cdn2.hubspot.net/hubfs/8531059/banner-blank347.png" alt="banner-blank.png" style="display:block;max-width:100%;height:auto !important;border:none;outline:none;"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textBox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr">
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" style="padding: 15px 0;">
<h2 style="font-family:Arial,sans-serif;color:#000000;font-weight:bold;font-size:30px;margin:0;padding:0;line-height:35px;">Thank you for completing your profile</h2>
</td>
</tr>
<tr>
<td dir="ltr" style="padding-bottom: 15px;">
<span style="font-family:Arial,sans-serif;color:#000000;font-weight:normal;font-size:13px;margin:0;padding:0;line-height:15px;">Published on: 11.4.2020</span>
</td>
</tr>
<tr>
<td dir="ltr" style="padding-bottom: 15px;">
<p style="font-family:Arial,sans-serif;color:#000000;font-weight:normal;font-size:15px;margin:0;padding:0;line-height:24px;">We're really happy to say that we've looked over your request to join our beta,and decided to gladly accept it! This means that you'll be able to have a personal web profile and enjoy all the benefits of Jourmal.</p>
</td>
</tr>
<tr>
<td dir="ltr" style="padding-bottom: 15px;">
<p style="font-family:Arial,sans-serif;color:#000000;font-weight:normal;font-size:15px;margin:0;padding:0;line-height:24px;">In order to complete your registration,please click on the button below and submit all the required information for your web profile:</p>
</td>
</tr>
<tr>
<td dir="ltr" style="padding-bottom: 25px;">
<table bgcolor="#132749" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="background-color: #132749; border-radius: 5px;">
<tr>
<td dir="ltr" align="center" style="font-family: Arial,sans-serif; font-weight:bold; color:#FFFFFF;line-height:13px; padding: 12px 18px;">
<a href="#" target="_blank" style="font-family: Arial,sans-serif; font-weight:bold; color:#FFFFFF; font-size:13px; text-decoration: none; display: block;">
Read more
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" style="padding: 25px 20px; border-top: 2px solid #EEEEEE;" class="pd_lr15">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td dir="ltr" align="center" style="padding-bottom: 15px;">
<a href="#" target="_blank"><img width="125" src="https://cdn2.hubspot.net/hubfs/8531059/logo-ratina.png" alt="logo-ratina" style="display:inline-block;max-width:100%;height:auto !important;border:none;outline:none;" /></a>
</td>
</tr>
<tr>
<td dir="ltr" align="center" style="padding-bottom: 15px;">
<p style="font-family:Arial,sans-serif;color:#000000;font-weight:normal;font-size:13px;margin:0;padding:0;line-height:15px;">© 2020 Jourmal. All Rights Reserved <br>David Alroy 5,Jerusalem,Israel. <br>View our <a href="http://www.jourmal.com/privacy" target="_blank" style="color:#000000; text-decoration: underline;">Privacy Policy</a></p>
</td>
</tr>
<tr>
<td dir="ltr" align="center">
<p style="font-family:Arial,sans-serif;color:#23496d;font-weight:normal;font-size:13px;margin:0;padding:0;line-height:15px;">You are getting this email because you subscribed to Rachel Adams. <br> No longer want receive these emails? <a href="https://hs-8531059.s.hubspotfree.net/email-unsubscribe/email?product=emailStarter&checkSubscriptions=all&d=VmYj8G7XdDFYVKgD3Q3_YlyBW2m3bL73_YlyBN1JxwY5GKd_PV20N6l5HkclnW4d7nMW8f6G3DF588fx5TzwT1&v=2&email=example@example.com" target="_blank" style="color:#23496d; text-decoration: underline;">Unsubscribe</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
