通过处理 HTML 电子邮件,我们已经使电子邮件能够在任何地方正确呈现:Outlook 2010、Mozilla Thunderbird、Horde/IMP、Gmail、Yahoo 等。但是,当通过 Outlook Web App (Exchange 2010) 检查电子邮件时),HTML 电子邮件有时会错误呈现。
我们看到的两个问题是,在 Internet Explorer 和 Firefox 中,不遵守字体大小 CSS 内联指令,并且在 Firefox 中,表格单元格之间存在间隙,从而破坏了图像。仅当邮件不在收件箱中时才会发生这种情况。如果我们将邮件从文件夹拖到收件箱中,问题就会消失。将其拖回到文件夹中,它们就会重新出现。如果我们在新窗口(而不是在预览窗格中)打开消息,消息将正确呈现。
我猜测 Outlook Web App 的 CSS 会产生干扰,但我希望有人遇到过类似的问题,并且可能能够阐明我们如何解决此问题。
以下是在客户端中看到的相关消息源:
<html>
<head>
<style>a{color:#BF0005}</style>
</head>
<body bgcolor="#F5F5F5" style="margin:0;text-align:center">
<table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt">
<tr>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td>
<td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td>
</tr>
<tr>
<td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px">
<h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1>
<p>This is a test email.</p>
</td>
</tr>
<tr>
<td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td>
</tr>
</table>
</body>
</html>
编辑:我已经通过 Firebug 对源进行了一些挖掘,我认为我已经将其范围缩小到 Outlook Web 的问题应用程序。在收件箱视图中,消息正文封装在
中,并且 HTML 消息的内容保持不变。但是,查看其他文件夹中的消息来源时,不会使用
,并且消息的
标签会转换为 < ;div>
由 OWA 提供。然后,该消息会合并 OWA 样式表中的样式,这些样式似乎会覆盖 HTML 电子邮件的内联样式。
我想我们会向微软开一张票。
Working on an HTML email, we've gotten the email to render properly everywhere: Outlook 2010, Mozilla Thunderbird, Horde/IMP, Gmail, Yahoo, etc. etc. However, when the email is checked via the Outlook Web App (Exchange 2010), the HTML email is incorrectly rendered sometimes.
The two issues we're seeing is that in Internet Explorer and Firefox, the font-size CSS in-line directives aren't respected and in Firefox, a gap is put between the table cells, breaking the image. This only happens when the message is NOT in the Inbox. If we drag the message from a folder into the Inbox, the problems disappear. Drag it back into a folder and they reappear. If we open the message in a new window (instead of in the preview pane), the message renders properly.
I'm guessing the CSS of the Outlook Web App is interfering, but I'm hoping someone has had a similar issue and might be able to shed some light on how we can fix this problem.
Here is the relevant message source as seen in the client:
<html>
<head>
<style>a{color:#BF0005}</style>
</head>
<body bgcolor="#F5F5F5" style="margin:0;text-align:center">
<table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt">
<tr>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td>
<td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td>
</tr>
<tr>
<td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px">
<h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1>
<p>This is a test email.</p>
</td>
</tr>
<tr>
<td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td>
</tr>
</table>
</body>
</html>
EDIT: I've done some digging into the source via Firebug, and I think I've narrowed it down to being a problem with the Outlook Web App. In the Inbox view, the body of the messages are encapsulated in an <iframe>
and the contents of the HTML message are unchanged. However, viewing the source of messages in other folders, no <iframe>
is used and the <body>
tag of the message is converted into a <div>
by OWA. The message is then incorporating styles from the OWA style sheet that seem to be overwriting the inline style of the HTML email.
I think we're going to open up a ticket with Microsoft.
发布评论
评论(1)
不幸的是,这个问题是微软的问题。我们不久前已经向他们开了一张票,但还没有收到回复。因此,我们只能凑合着做。
Unfortunately, this problem is a Microsoft issue. We've opened a ticket with them a while ago, but have not heard back. Therefore, we'll just have to make do.