2

我正在处理 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 运行了这个，并且需要对剩下的这几个客户提供一些帮助。我无法修改这两个图像以内置边框作为旁注......

4

3 回答 3

0

我认为您可以将这 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>
于 2013-05-29T15:43:16.150 回答
0

You are also declaring border=0 in html on the same image. Not sure if that is overriding your css declaration in this case.

You could try setting that to 1 (or removing it altogether). If you set it to 1, you'd have to set the color on the 3 other border sides to match the background so they are effectively invisible.

于 2013-05-22T18:06:49.033 回答
0

Outlook 2007 不支持元素border上的 CSS - 请参阅 Outlook 2007 电子邮件标准项目的报告。这里有来自同一站点的更详细示例。<img>

因此，Outlook 2007 文档中的 Word 2007 HTML 和 CSS 渲染功能似乎不正确，因为它声明该<img>元素确实支持 border-right.

我建议将第一张图片包装在 a 中<span>并设置样式。抱歉，我没有 Outlook，所以无法测试。

于 2013-05-22T13:54:13.670 回答