Outlook 简报不想正常显示 HTML CSS
Outlook newsletter des not want to display properly HTML CSS
我正在努力找出我的时事通讯可能存在的问题 header。它有时在我测试时工作正常，但最细微的变化都会改变一切，我什至无法注意到导致错误的原因。
这是显示我的问题的代码和图片：
<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;">
<tr>
<td align="center" >
<br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<br>
<td align="center">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
这是以下照片：
我想要达到的目标
当我在 outlook 中打开它时会发生什么
显然，它适用于所有其他邮件 "client" 例如。电子邮件。
我现在有点绝望...
根据一些研究，Outlook 2007 及更高版本似乎无法显示使用 "background-image" 设置的图像。但是，您可以使用标签。
查看此线程了解更多信息：
Background images not working in Outlook 2007 and later
我在下面清理了你的代码。我添加了一些 width="100%"s 和 width="600"s 因为 Outlook 不支持 max-width。我还将所有 CSS 内联 style 属性移动。
两个 <!--[if gte mso 9]>（用于背景图片和按钮）块不协调。我让他显示背景图像，但按钮的 VML 部分会出现在块的左上角。删除按钮的 VML 部分修复了布局，但在 Windows Outlook 中丢失了按钮的边框半径 (arcsize)（border-radius 涵盖大多数其他电子邮件客户端）。
并非处处像素完美，但希望这是朝着正确方向迈出的一步！
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600">
<tr>
<td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%">
<tr>
<td align="center"><br>
<img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
</tr>
<tr>
<td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td>
</tr>
<tr>
<td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td>
</tr>
<tr>
<td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
</tr>
<tr>
<td align="center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;">
<tr>
<td style="border-radius: 30px; background: #d1003e; text-align: center;">
<a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;">
<span style="color:#ffffff;">WEBSITE</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
我正在努力找出我的时事通讯可能存在的问题 header。它有时在我测试时工作正常，但最细微的变化都会改变一切，我什至无法注意到导致错误的原因。
这是显示我的问题的代码和图片：
<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;">
<tr>
<td align="center" >
<br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<br>
<td align="center">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
这是以下照片：
我想要达到的目标
当我在 outlook 中打开它时会发生什么
显然，它适用于所有其他邮件 "client" 例如。电子邮件。 我现在有点绝望...
根据一些研究，Outlook 2007 及更高版本似乎无法显示使用 "background-image" 设置的图像。但是，您可以使用标签。
查看此线程了解更多信息： Background images not working in Outlook 2007 and later
我在下面清理了你的代码。我添加了一些 width="100%"s 和 width="600"s 因为 Outlook 不支持 max-width。我还将所有 CSS 内联 style 属性移动。
两个 <!--[if gte mso 9]>（用于背景图片和按钮）块不协调。我让他显示背景图像，但按钮的 VML 部分会出现在块的左上角。删除按钮的 VML 部分修复了布局，但在 Windows Outlook 中丢失了按钮的边框半径 (arcsize)（border-radius 涵盖大多数其他电子邮件客户端）。
并非处处像素完美，但希望这是朝着正确方向迈出的一步！
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600">
<tr>
<td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%">
<tr>
<td align="center"><br>
<img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
</tr>
<tr>
<td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td>
</tr>
<tr>
<td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td>
</tr>
<tr>
<td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
</tr>
<tr>
<td align="center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;">
<tr>
<td style="border-radius: 30px; background: #d1003e; text-align: center;">
<a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;">
<span style="color:#ffffff;">WEBSITE</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>