HTML 在一个 Outlook 中就搞砸了答案

【问题标题】：HTML messed up in just one OutlookHTML 在一个 Outlook 中就搞砸了
【发布时间】：2015-09-24 18:48:18
【问题描述】：

我遇到了 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 中是否有任何特定设置会导致此问题？除了一台笔记本电脑，其他地方看起来都不错。我要疯了，想弄清楚。谢谢！

【问题讨论】：

不能完全解决这个问题..你能提供整个代码吗..
这台笔记本电脑有什么不同？它是相同版本的 Outlook 吗？它们是否连接到 Exchange、POP3 或 IMAP？用户是否设置为以纯文本格式阅读所有互联网电子邮件？
同一台笔记本电脑，同一版本的 Outlook (2010)，由 IT 部门以与其他人相同的方式设置。这就是为什么让我发疯的原因。用户可能摆弄了一些我不知道的设置。

标签： html email outlook mailchimp

【解决方案1】：

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

如果您让那个人确保 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 和 Email 对 Acid 的一些参考资料。

Litmus

Email On Acid

【讨论】：

谢谢！信不信由你，我只是在阅读有关 Litmus 的同一页。看来这个谜终于可以解开了。我会试一试，看看发生了什么。我讨厌前景！
Outlook 需要一种超越常规 HTML 电子邮件开发的思维方式。基本上，Outlook 的设计和开发就像一个全新的专业。如果您希望专注于 Outlook 受众，我会研究条件代码和 VML 的功能。 backgrounds.cm 和buttons.cm 也是两个很好的关于按钮或背景帮助的参考。如果您觉得我的回答是一个解决方案，请确保将其标记为这样。谢谢，祝你好运

【解决方案2】：

Outlook 不喜欢 HTML，但有一个解决方法。

在极端情况下，您可以发送纯文本电子邮件。即使没有走那么远，您也可以发送 HTML 电子邮件，只要您保留您的格式化简单：作为一项规则，不要使用任何 CSS 元素（如果你是不确定那些是什么，要么问你的网页设计师，要么干脆不担心它）。

如果您保持简单，Outlook 用户应该不会注意到任何异常普通的。

或者，您可以简单地接受 Outlook 用户可能有麻烦，并为他们提供一个链接以将您的电子邮件视为网络页。这允许您使用 HTML 电子邮件模板和其他高级样式功能，同时仍然为邮件客户端的用户提供不支持这些功能一个选项可以查看您的消息应该被看到。

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

【讨论】：

它确实有效，并且在我见过的所有 Outlook 客户端上看起来都不错，除了一个。代码没有问题，因为它完全按照应有的方式呈现。我猜测特定的 Outlook 客户端有某种不合适的设置（如果有这样的事情）。
您是否检查过他们是否允许在 Outlook 中运行 html 代码？
是的，允许运行 HTML。
客户端的版本是多少？
Outlook 2010，和其他人一样。