Question

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

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

例如，开始表标签的渲染方式如下：

（嗯 - 如此错误的stackoverflow也不会渲染它）。

基本上它是删掉属性的第一个字符，所以width =＆＃34; 100％＆＃34;渲染为width =＆＃34; 00％＆＃34;，align =＆＃34; eft＆＃34;，链接出现为＆＃34; ttp：//something.com" ;,缺少引号等。在outlook.com中查看源根本不显示HTML - 它必须通过javascript呈现，因为我只能使用Firebug看到它。

我已尝试使用和不使用条件注释（适用于Outlook的应用程序），以及使用/不使用doctype。没有比这更好的了。我不知道发生了什么，也没有找到关于属性被截断的其他帖子。

有什么想法吗？

这是电子邮件的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

your code looks pretty email friendly to me!

My only suggestion is check all your elements in accordance with Campaign Monitor's support guide (https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5117&_ga=1.123317261.720201475.1441145331).

Another handy feature campaign monitor use is their testing system, this also gives a preview of what your email would look like in each browser/email client (outlook.com is supported). Unfortunately each test costs 5 Australian dollars but sometimes I find the fee is worth the headache as it's always accurate!

More info on this can be found here: https://www.campaignmonitor.com/testing/

Answer 2

Ack - 结果我的内容传输编码错误了。我把它设置为引用可打印但应该是8位或7位。 quoted-printable假定它被读取为呈现，并且不是要解释的代码。或者我收集。

奇怪的是，它在其他所有测试的客户端都运行良好。所以 - “谢谢”outlook.com，教我一些东西......

在outlook.com

2 个答案: