HTML只在一个Outlook中搞砸了

时间:2015-07-07 10:21:53

标签: html email outlook mailchimp

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

2 个答案:

答案 0 :(得分:1)

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

如果你有那个人确保DPI设置是100%,这应该可以解决问题 - 但是因为你无法一直告诉所有的观众,所以最好放一下而不是电子邮件中的预防性代码,并考虑到这一点。

  1. 设置表格和tds的内联px定义(或者可以使用围绕代码的条件定义表格)。

  2. 使用mso-padding-alt和mso-cellspacing。

  3. 将此用于PNG图像:

    <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]-->

  4. 将其插入HTML标记:

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

  5. 有关Outlook&#DPI问题提示的最佳资源位于J.M. White's blog。以下是Litmus和Acid on Acid的一些参考资料。

    Litmus

    Email On Acid

答案 1 :(得分:0)

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-