HTML 只在一个 Outlook 中搞砸了

Question

我遇到了 Outlook 问题。我有一份在 Mailchimp 中创建的时事通讯，自定义编码，在所有电子邮件客户端（包括 Outlook）中看起来都不错，除了一个人，代码到处都是。我说的是这段代码：

 <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px;overflow:hidden;">
    <tr>
      <td class="header" align="left" valign="bottom" style="padding-bottom:0;">
        <img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/026f82b3-11d7-4499-a7a9-fedc75467f5c.png" style="width:100%;" class="align-header">
        <!--[if mso]>   
      </td>
    </tr>
    <tr>
        <td class="container-padding content" align="center" valign="bottom" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#0ea19b;">
        <![endif]-->
        <div class="container-padding content" valign="bottom" align="center" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#0ea19b;margin-top:0!important; display:inline-block;width:95%;">
                        <!--[if mso]>
            <table border="0" width="500" cellpadding="0" cellspacing="0" class="container" style="width:500px;max-width:500px;"><tr><td width="200">
            <![endif]-->
            <div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#fff;text-align:left;">July 2015</div>
            <!--[if mso]>
                </td><td width="300" valign="middle">
                <![endif]-->
                <div class="title2" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:600;color:#fff;text-align:right;"><a href="http://kent.us9.list-manage.com/subscribe?u=ce2871176f2cf0da723a750b1&id=b8f569ff81" target="_blank">Subscribe to our<br>consumer newsletter</a></div><br>
                <!--[if mso]>
                </td></tr></table>
                <![endif]-->
                <div class="social" style="display:block;width:100%;text-align:center;float:left;">
            <a href="https://www.facebook.com/pages/Kent-Trading-Standards/386603161497200" target="_blank" style="text-decoration:none;">
                <img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/7f528f2d-ce24-4fd7-a961-8e70c32aa87d.png" border="0">
            </a>&nbsp;
            <a href="https://twitter.com/kent_ts" target="_blank" style="text-decoration:none;">
                <img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/250357af-fa8d-447d-ae24-e5836c66c0b1.png" border="0">
            </a>&nbsp;
            <a href="https://www.pinterest.com/kentts/" target="_blank">
                    <img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/87851a7e-7f3d-49e0-8fc0-3bf8bb12b98f.png" border="0">
                </a>
            </div>
            </div>
        </td>
    </tr>
      <tr>
        <td>
            <img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/559f5753-373f-47f7-a97e-ffe454a991d8.jpg" style="width:100%;">
        </td>
      </tr>
      <tr>
      <td class="container-padding content" align="left" style="background-color:#ffffff">

Outlook 中是否有任何特定设置会导致此问题？其他地方看起来都不错，除了一台笔记本电脑。我要疯了，想弄明白。谢谢！

Answer 1

Outlook 不喜欢 HTML，但有一个修复程序。

On the extreme end, you can send plain text email. Even without going that far, you can send HTML email, as long as you keep your formatting simple: as a rule, don't use any CSS elements (if you're not sure what those are, either ask your web designer or simply don't worry about it).

If you keep things simple, Outlook users shouldn't notice anything out of the ordinary.

Alternately, you can simply accept that Outlook users may have trouble, and provide them with a link to view your email as a web page. This allows you to use HTML email templates and other advanced styling features, while still giving users of mail clients that don't support those features an option to see your messages as they were meant to be seen.

参考：https://help.aweber.com/hc/en-us/articles/204030726-Why-Doesn-t-My-HTML-Message-Display-Correctly-in-Outlook-

Answer 2

Outlook 的显示基于 Windows 中的 DPI 设置，这可能是它只影响一个人的原因。这会大大增加图像和表格等的大小，从而对布局造成严重破坏。这是一个客户端功能（通常在高清笔记本电脑上，因为默认情况下它们通常设置为 125% DPI）并且你无法真正控制它，因为 designer/sender.

如果你让那个人确保 DPI 设置为 100%，那应该可以解决问题 - 但由于你不能一直告诉所有观众，最好把改为电子邮件中的预防性代码，并在设计时考虑到这一点。

设置表和 tds 的内联 px 定义（或者您可以在代码周围使用条件定义表）。
使用 mso-padding-alt 和 mso-cellspacing。
将此用于 PNG 图像：


在 HTML 标签中插入：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

我找到的有关 Outlook DPI 问题提示的最佳资源在 J.M. White's blog。以下是 Litmus 和电子邮件中关于 Acid 的一些参考资料。

Litmus

Email On Acid

HTML 只在一个 Outlook 中搞砸了

HTML messed up in just one Outlook

html

email

outlook

mailchimp