HTML电子邮件在Outlook.com中显示混乱

Question

我正在发送包含纯文本和HTML版本的相当简单的多部分消息。 HTML版本是带有一些列的表，所有列的大小均以百分比表示。 所有样式都是内联的。

在outlook.com中，它呈现得非常糟糕。 查看源代码（在浏览器-Firefox中）我可以看到它正在破坏HTML。

例如，开始表格标记的呈现方式如下：

（嗯-如此混乱的stackoverflow也不会呈现它）。

基本上是从属性的第一个字符开始，因此width =“ 100％”呈现为width =“ 00％”，align =“ eft”，链接显示为“ ttp：//something.com”，缺少引号，等等。在outlook.com中查看源代码根本不显示HTML-必须通过javascript呈现，因为我只能使用Firebug看到它。

我已经尝试了带条件注释和不带条件注释（适用于Outlook应用程序）以及带/不带文档类型的情况。 没有什么比这更好。 我不知道发生了什么，也找不到关于属性被截断的其他文章。

有什么想法吗？

这是电子邮件的HTML部分：

<!DOCTYPE html>
<html>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;line-height: 1.4; color: #333;">
    <!--[if (gte mso 9)|(IE)]>
    <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                <![endif]-->
                <table style="width: 100%; max-width: 600px;" align="left" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="3" width="100%" height="16"></td>
                    </tr>
                    <tr>
                        <td width="3%"></td>
                        <td><img src="https://www.domain.com/logo.png" width="203" height="38" alt="alt name" /></td>
                        <td width="3%"></td>
                    </tr>
                    <tr>
                        <td colspan="3" width="100%" height="30"></td>
                    </tr>
                    <tr>
                        <td width="3%"></td>
                        <td width="94%">
                            Hello,<br />
                            <br />
                            The Proof for Order Item #123 is ready for review. Please login to your account to review and approve the proof.<br />
                            <br />
                            Log in at <a href="https://www.domain.com/my-account/" style="color: #0c7ebd;">https://www.domain.com/my-account/</a> and choose "Proofs Waiting Approval" on the "My Account" page.<br />
                            <br />
                            Click the "Review" link for ID 123 - you will see your proof and you will be able to approve it for delivery. You will also have the opportunity to request changes.<br />
                            <br />
                            Please contact our office if you have any questions.<br />
                            Thank you.<br />
                            <br />
                            Sincerely,<span style="font-size: 4px;"><br />
                            <br />
                            </span>
                            <span style="font-size:13px; font-weight: bold;">COMPANY TEAM</span><br />
                            <span style="font-size: 9px;"><span style="color: #2b9f4c;">COMPANY</span> | CUSTOMER SERVICE</span><span style="font-size: 11px;"><br />
                            <span style="font-weight: bold;color: #0c7ebd;">T:</span> 888.555.2122</span><span style="font-size: 4px;"><br />
                            <br />
                            </span>
                            <span style="font-size: 10px;"><a href="https://www.domain.com" style="color: #0c7ebd;">www.domain.com</a><span style="font-size: 3px;"><br />
                            <br />
                            </span>
                            <img src="https://www.domain.com/images/email/ConsiderEnvironment.png" width="37" height="42" alt="" /> <span style="color: #2b9f4c;">Please consider the environment before printing this email</span></span>
                        </td>
                        <td width="3%"></td>
                    </tr>
                    <tr>
                        <td colspan="3" width="100%" height="30"></td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
    <![endif]-->
</body>
</html>

Answer 1

您的代码对我来说看起来很友好。

我唯一的建议是根据Campaign Monitor的支持指南（ https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014来检查所有元素。 pdf？ver = 5117＆_ga = 1.123317261.720201475.1441145331 ）。

广告系列监控器另一个方便使用的功能是其测试系统，它还可以预览每个浏览器/电子邮件客户端中电子邮件的外观（支持outlook.com）。 不幸的是，每项测试的费用为5澳元，但有时候我觉得收费是值得头痛的，因为它总是很准确的！

有关此的更多信息，请参见： https ： //www.campaignmonitor.com/testing/

Answer 2

确认-事实证明我的Content-Transfer-Encoding错误。 我将其设置为quoted-printable，但应该为8bit或7bit。 quoted-printable假定应按显示方式阅读它，而不是要解释的代码。 还是我聚集。

奇怪的是，它在接受测试的所有其他客户端中都可以正常工作。所以-感谢“ outlook.com”，教给我一些东西...

HTML电子邮件在Outlook.com中显示混乱

问题描述

2 个解决方案

解决方案1
1 2015-09-01 22:56:55

解决方案2
0 2015-09-02 04:09:47

HTML电子邮件在Outlook.com中显示混乱

问题描述

2 个解决方案

解决方案1 1 2015-09-01 22:56:55

解决方案2 0 2015-09-02 04:09:47

解决方案1
1 2015-09-01 22:56:55

解决方案2
0 2015-09-02 04:09:47