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不支持border元素上的CSS <img> - 请参阅Outlook 2007电子邮件标准项目中的the report。来自同一网站的更详细示例{{3} }}

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

我建议将第一张图片打包在<span>中，然后再设置样式。抱歉，我无法测试，因为我没有Outlook。

Answer 2

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

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

Answer 3

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

<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>

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

3 个答案: