HTML 电子邮件 - 缺少 img 标记上的 Outlook 2007 边框

Question

我正在处理一封 HTML 电子邮件，但在 Outlook 2007、2010、2013 中遇到了一些 CSS 样式问题。

我在一个 td 单元格中有两张图像，其中一张我想要一个垂直边框分隔线来分隔它们。我在第一张（左图）右侧放置了一个边框，它适用于 Outlook 2007、2010、2013 的所有客户端/浏览器。

这是我正在使用的代码：

 <tr>
     <td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
         <img src="lowreslogo.png" border="0" width="130" style="border-right:1px solid #a377cd;padding-right:20px;"  align="left">
         <img src="email_logo.png" border="0" width="150" align="left" style="padding-top:7px;">
     </td>
 </tr>

我已通过 litmus.com 运行此程序，需要对剩下的这几个客户提供一些帮助。我无法修改这两个图像以内置边框作为旁注...

Answer 1

Outlook 2007 不支持 <img> 元素上的 CSS border - 请参阅 Outlook 2007 电子邮件标准项目中的 the report。同一站点 here 提供了更详细的示例。

因此，Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 文档似乎不正确，因为它指出 <img> 元素 does support border-right。

我建议将第一张图片包装在 <span> 中，然后对其进行样式设置。抱歉，我没有 Outlook，无法测试。

Answer 2

您还在同一图像的 html 中声明了border=0。不确定在这种情况下这是否会覆盖您的 css 声明。

您可以尝试将其设置为 1（或完全删除它）。如果将其设置为 1，则必须将其他 3 个边框侧的颜色设置为与背景匹配，这样它们实际上是不可见的。

Answer 3

我认为您可以将这 2 张图片包装在如下表中。一些额外的代码，但会修复渲染问题。

<tr>
     <td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
        <table border="0" cellpadding="0" cellspacing="0" width="300" style="color:#ffffff">
            <tr>
                <td width="130"><img src="lowreslogo.png" border="0" width="130" alt="" style="display: block;" /></td>
                <td width="19"></td>
                <td width="1" bgcolor="#a377cd"><td>
                <td width="150" style="padding-top:7px;"><img src="email_logo.png" border="0" width="150" alt="" style="display: block;" /></td>
            </tr>
         </table>
     </td>
</tr>