outlook - Salesforce 电子邮件模板在 Outlook 2016 中无法正确显示
问题描述
我使用 Marketing Cloud 创建了一个电子邮件模板。当我使用 Outlook Web App 将它发送给自己时，一切看起来都很好（第一张图片），但是当我使用 Microsoft Outlook 2016 时，它并不好（第二张图片）。我用谷歌搜索了它，但结果并没有太大帮助。我很感激任何帮助。通过 Outlook Web Access（良好）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
@-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
h1 { font-size: 22px !important; line-height: normal !important;}
h2 { font-size: 20px !important; line-height: normal !important;}
h3 { font-size: 18px !important; line-height: normal !important;}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
@media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#808080;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
<body bgcolor="#efefef" text="#808080" style="background-color: #efefef; color: #808080; margin: 0px; padding: 20px; -webkit-text-size-adjust:none; line-height: normal; font-size: 16px; font-family:arial,helvetica,sans-serif;">
<div style="font-size:0; line-height:0;"><custom name="opencounter" type="tracking"><custom name="usermatch" type="tracking" /></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top">
<custom type="header" />
</td>
</tr>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center">
<tr>
<td>
<!-- added the border style here -->
<table class="tb_properties border_style" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<!-- end of comment -->
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- added padding here -->
<td class="content_padding" style="padding:10px;border:0px;">
<!-- end of comment -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="header" valign="top">
<table role="presentation" style="background-color: transparent; min-width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid #AEAEAE; border-left: 0px; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 0px 20px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636"></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 100%;" valign="top"><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h1 style="font-family: Arial, helvetica, sans-serif; font-size: 28px; color: rgb(128, 128, 128); line-height: 1; font-weight: bold; font-style: normal; text-align: center;">
Happy New Year!</h1><div>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">Dear %%=IIF(Not empty(FirstName), FirstName, '</span></span></span></span></span></span></span></span> <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">colleague and friend of NALRC</span></span></span></span><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">')=%%,<br>
<br>
As we begin year 2021, we at NALRC wish you a healthy and happy New Year, with a sincere wish that 2021 will </span><span style="font-family:"Verdana",sans-serif">bring you much health, happiness and prosperity!</span></span></span></span><br>
<br>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">This year, our center will continue to work with you on unique programs and projects that support African language teaching and learning. A couple of </span><span style="font-family:"Verdana",sans-serif">exciting new projects are underway for which we would be calling for your contributions. </span></span><span style="font-family:"Verdana",sans-serif">Among our upcoming workshops are:</span></span></span><br>
</span></span></span></span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 50%; padding-right: 10px;" valign="top"><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
The NALRC Annual Summer Institute</h3><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">This two-week foreign language teaching methodology training program, which is organized for instructors of African languages, is packed with educative activities that allow you to participate in and gain professional development.</span></span></span></span><br>
</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203681" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/1c8e33c8-9dbc-4794-8c46-fd7dd78218c3.jpg" alt="" style="display: block; height: auto; width: 100%; padding: 4px; text-align: center;" width="100%"></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D"><a target="_blank" style=" font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/summer-institute.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td><td class="responsive-td" style="width: 50%; padding-left: 10px;" valign="top"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203683" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/3c73118a-d927-4361-8ba0-066926bf3cc4.jpg" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="557"></td></tr></table></td></tr></table><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
The Business in World Languages Workshop</h3>This workshop is designed to introduce you to the “World Language Curriculum Framework that Incorporates Business Concept” at the Elementary and Intermediate Levels of language instruction and train you on how to use the document.</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a target="_blank" style=" text-decoration: none; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: left; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/business-in-language1.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="background-color: transparent; border: 2px solid #000000; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 10px 11px; " class="stylingblock-content-wrapper camarker-inner"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
<a alias="African Language Experts&#x27; List" conversion="false" data-linkto="https://" href="https://hls.indiana.edu/machform/view.php?id=216441" style="color:#808080;text-decoration:none;" title="African Language Experts' List">African Language Experts' List</a></h3><div>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">The NALRC is frequently contacted by different organizations and individuals to request for speakers and specialists of various African languages. We are revamping the NALRC’s list of African language scholars, native speakers, and instructors who are available to serve as translators, interpreters for courts, hospitals, government and non-government agencies, oral proficiency testers for government agencies, and heritage learners nationwide. Please fill out this form to join the list. This list will be maintained and regularly updated by our Center. </span></span></span></span></div></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="center"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a style=" text-decoration: none; display: block; font-family: Arial, helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: center; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" target="_blank" class="buttonstyles" href="https://hls.indiana.edu/machform/view.php?id=216441" title="" alias="" conversion="false" data-linkto="https://">Join the List</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 11px; " class="stylingblock-content-wrapper camarker-inner"><br>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">We invite you to <a alias="visit our website" conversion="false" data-linkto="https://" href="https://nalrc.indiana.edu/index.html" style="color:#808080;text-decoration:none;" title="visit our website"><span style="color:#2980b9;">visit our website</span></a> for important information about our current news and events, professional development opportunities, teaching and learning resources, and networks of African language professionals.</span></span></span></span><br>
</td></tr></table><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><table class="socialshare-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr> <td><table cellspacing="0" cellpadding="0" align="center"><tr><td align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0"><tr><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="facebook follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-facebook-grey-2x.png" alt="Facebook" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="twitter follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-twitter-grey-2x.png" alt="Twitter" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="pinterest follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-pinterest-grey-2x.png" alt="Pinterest" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="instagram follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-instagram-grey-2x.png" alt="Instagram" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td></tr></table><![endif]--></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 20px; " class="slot-styling camarker-inner"><table role="presentation" style="text-align: center; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="center"><div style="text-align: center;">
<a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a> | <a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a> | <a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a></div></td></tr></table></td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<custom type="footer" />
</td>
</tr>
</table>
</body>
</html>解决方案
看起来你有一个非常宽的图像：
<img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636">
Outlook 将做的是，无论您的 CSS（内联 CSSstyle="..."或嵌入式 CSS，如<style>...</style>），将其插入为 636 像素宽（the width="..."），将模板推出到屏幕截图显示的宽度。
相反，请确保您为 Outlook 设置了宽度属性，然后为其他所有内容设置了内联样式（例如，100% 响应式）。
可能有更多的图像太宽了——我只是拿出了我能找到的第一张。
推荐阅读
- python - 如何防止 TensorFlow Input 生成批量维度
- java - Java 8，重复字符串浪费了内存
- javascript - 格式化日期对象的 JavaScript 错误
- python - 如何修复“cv2”没有属性“CascadeClassifier”？
- mysql - ERROR 1452：无法添加或更新子行：DELETE 操作上的外键约束失败？
- json - JSON 数据发送无法完成
- javascript - JavaScript _.throttle 不能连续调用 3 次？
- java - 合并两个忽略空值的复杂对象
- javascript - 当我更改内部 HTML 时，按钮停止工作
- php - 想对 php 中组合的 3 个数组使用 foreach 循环