我正在寻求帮助来修复时事通讯的代码，以使其在Outlook桌面中正常工作。它甚至在Outlook Mobile中也可以在其他电子邮件中很好地工作。在Outlook桌面中，大部分新闻简报都一团糟。我也乐于接受其他有关创建新闻通讯以在Outlook桌面中正常工作的建议。
这是代码：
<style type="text/css">
* {
-webkit-font-smoothing: antialiased;
}
body {
Margin: 0;
padding: 0;
min-width: 100%;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
mso-line-height-rule: exactly;
}
table {
border-spacing: 0;
color: #333333;
font-family: Arial, sans-serif;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.inner {
padding: 10px;
}
p {
Margin: 0;
padding-bottom: 10px;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-top: 15px;
Margin-bottom: 5px;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-top: 10px;
Margin-bottom: 5px;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.one-column .contents {
text-align: left;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
max-width: 300px;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.three-column .contents {
font-size: 14px;
text-align: center;
}
.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.three-column .text {
padding-top: 10px;
}
.img-align-vertical img {
display: inline-block;
vertical-align: middle;
}
@media only screen and (max-device-width: 480px) {
table[class=hide], img[class=hide], td[class=hide] {
display: none !important;
}
.contents1 {
width: 100%;
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>
<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#f3f2f0;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#f3f2f0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f3f2f0;" bgcolor="#f3f2f0;">
<tr>
<td width="100%"><div class="webkit" style="max-width:600px;Margin:0 auto;">
<!--[if (gte mso 9)|(IE)]>
<table width="100" align="left" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<!-- ======= start main body ======= -->
<table class="outer" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><!-- ======= start header ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td><table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center"><center>
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="Margin: 0 auto;">
<tbody>
<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" bgcolor="#FFFFFF"><!-- ======= start header ======= -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f3f2f0">
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:left;font-size:0;" > </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<!-- ======= end header ======= -->
<!-- ======= start two column ======= -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#FFFFFF" style=" border-left:1px solid #e8e7e5; border-right:1px solid #e8e7e5">
<tr>
<td background="https://gallery.mailchimp.com/444a837423b315d2d2f73a03c/images/8ed1174a-8cea-49a4-8010-0c48fb55f96f.png" bgcolor="#000000" width="600" height="240" valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0"
class="two-column"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:260px;">
<v:fill type="tile" src="https://gallery.mailchimp.com/444a837423b315d2d2f73a03c/images/8ed1174a-8cea-49a4-8010-0c48fb55f96f.png" color="#1f3ca6" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!--[if (gte mso 9)|(IE)]>
<table width="50%" style="border-spacing:0" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table width="100%" style="border-spacing:0">
<tr>
<td class="inner" style="padding-top:20px;padding-bottom:10px; padding-right:10px;padding-left:30px;"><table class="contents1" style="border-spacing:0; width:100%">
<tr>
<td align="center" valign="middle" style="padding-top:20px; padding-right:30px"><p style="font-size:30px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left"> </p>
<p style="font-size:30px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left"><strong>Agenda Internacional</strong></p>
<p style="font-size:14px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px">Semana de 18 a 22 Fevereiro 2019</p></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;"></div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table> <!-- ======= end two column ======= -->
最佳答案
当前，您有一个图像作为两个表格单元的背景。将图像分成两部分，而不是与自己抗争。看起来第二张图像不需要在背景中。为此，创建一个包含两个单元格的表
<table>
<tr>
<td>Agenda Internacional</td>
<td>*corporate logo*</td>
</tr>
<table>
这样，您可以添加一个类，以便在移动设备中，右侧的表格单元格堆叠在左侧的表格单元格下方。当前在Outlook for IOS，iPhone X等电子邮件客户端中，正确的单元格不在屏幕上。
在gmail和其他电子邮件客户端中，背景是重复的。您应该添加
background-repeat: no-repeat;。Cerberus是一个很好的电子邮件模板，可用来创建更多动态电子邮件新闻稿。另一个好的模板环境是Zurb Email for Foundation。它还具有用于网站组件的html。我建议您下载其中之一并将其用作基础。我认为您会获得更好的产品。
https://tedgoas.github.io/Cerberus/
https://foundation.zurb.com/emails.html
祝好运。
关于html - 修复新闻稿代码以在Outlook中正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54222976/