Outlook 和 gmail 电子邮件完全不同答案

【问题标题】：Outlook and gmail emails are completely differentOutlook 和 gmail 电子邮件完全不同
【发布时间】：2014-02-03 09:12:27
【问题描述】：

我为我们的电子邮件营销活动制作了一个模板。但是在 gmail 上，msn（基于浏览器）很好，但在前景上很糟糕。我该如何解决这个问题？

我的一段代码：

<td valign="top" width="194" class="rightColumnContent">

                                                <!-- // Begin Module: Top Image with Content \\ -->
                                                 <table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
                                                    <tr mc:repeatable>
                                                        <td valign="top">
                                                            <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
                                                            <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />

                                                             Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.

                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!-- // End Module: Top Image with Content \\ -->

                                            </td>

【问题讨论】：

标签： email outlook gmail

【解决方案1】：

您需要在每个表格单元格中重新声明字体堆栈。

另外，避免使用边距，而是在<td> 标签中使用填充。

Float 也没有得到广泛支持。如果你想浮动，你应该使用align="left"，但对于你的例子，最好将它保存在表格中。

您的代码应如下所示：

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="60">
      <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
    </td>
    <td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
      ARAMA
    </td>
  </tr>
  <tr>
    <td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
      <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
       Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
      </div>
    </td>
  </tr>
</table>

我将表格宽度设置为 200，您可以根据需要将其更改为百分比。

【讨论】：

【解决方案2】：

让 HTML 电子邮件在所有客户中看起来都很棒是几乎每个尝试进行电子邮件营销的人都会遇到的问题。您的问题没有简单的答案，但我会先关注some of this advice，然后使用litmus 之类的工具测试您的电子邮件模板。

【讨论】：

mailchimp 模板也是一个很好的资源：@987654323@
更多列表here

【解决方案3】：

Float 在 Outlook 2007+ 中根本不起作用。 2007 年及以上版本的 Outlook for Windows 使用 Office 作为呈现引擎，因此无法正确呈现标准 HTML。

对齐通常会起作用，但最安全的做法是创建一个包含左侧图像和右侧文本的两列表。图像列应具有明确设置的宽度。（不要试图让表格超过一行。在电子邮件 HTML 中，嵌套一系列简单的表格比创建一个复杂的表格更好。）

确保在表格标签中使用适当的旧式 HTML 4 之前的标签属性。特别是，要获得您的布局，请确保表格单元格具有“valign='middle'”。

如果您通过 Mailchimp 或 Campaign Monitor 等主要电子邮件服务提供商之一发送邮件（为了保护列表的完整性，您应该这样做），它会为您内联所有样式代码 -- 所以您实际上不需要重新声明每个表格单元格的样式，您可以简单地使用嵌入式样式表。

【讨论】：