如何修复 Outlook 2016 中的 HTML 格式答案

【问题标题】：How to fix the HTML Formatting in Outlook 2016如何修复 Outlook 2016 中的 HTML 格式
【发布时间】：2018-01-06 07:24:11
【问题描述】：

我为 Web 表单生成的 HTML 代码有问题。
它适用于除 Outlook 之外的所有程序。

有没有办法解决这个问题？因为我真的不希望客户收到这样的电子邮件：/

我的 HTML 代码：

<div class="wrapper">
<div class="container">
<div class="inner">
<div class="header sitename"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></div>
<p>Schönen guten Tag {name},<br /> Ihre Anfrage ist bei uns eingegangen. Wir bemühen uns um eine schnelle Antwort, um Ihnen weiterhelfen zu können. Sie hören bald wieder von uns!</p>
<div class="footer">CENSORED</div>
</div>
</div>
</div>

我的 CSS：

/*
All classes will be replaced with style attribute.
This is done because some web mail (included google mail) strike out all style reference.

Due to this replacement the following statements will not work:
#id { color: red; }
table { border: 1px solid black; }

Related documentation: http://www.fox.ra.it/forum/enquiries-processors/11143-e-mail-notification-models.html
*/


body
{
       background-color: #fafafa;
}


.wrapper
{
    width: 100%;
    padding: 24px 0 24px 0;
    background-color: #fafafa;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container
{
    width: 90%;
    max-width: 680px;
    min-width: 280px;
    border: 1px solid #dddddd;
    background-color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(192, 192, 192, 0.9);
    margin: auto;
}

.inner
{
    color: #505050;
    font-size: 13px;
    padding: 24px;
        background-color: #ffffff;
}

.sitename
{
    font-size: 30px;
    line-height: 34px;
}

.header
{
    border-bottom: 1px solid #dddddd;
    margin-bottom: 32px;
    padding-bottom: 8px;
        background-color: #ffffff
}

.fields-list
{
    padding: 0;
    list-style-type: none;
}

.field-element
{
    list-style-type: none;
}

.field-title
{
    background-color: #eeeeee;
    padding: 4px;
    font-weight: bold;
    font-size: 13px;
    margin: 0;
}

.field-content
{
    margin: 4px 4px 16px 4px;
}

.field-table-href
{
}

.footer
{
    border-top: 1px solid #dddddd;
    margin-top: 32px;
    padding-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: #707070;
        background-color: #ffffff
}

在 Outlook 中看起来像这样

但它应该是这样的：

我真的希望有人可以帮助我:(

【问题讨论】：

标签： html css outlook html-email

【解决方案1】：

您最好的选择是内联或所有 CSS（如您所说的那样）并使用表格。 Outlook 不适用于 DIV。

如果您运行此代码，您会发现它与您刚刚在表格中的代码相同。需要注意的一件事是 Outlook 不读取 CSS3 元素（边框半径、阴影等）。你仍然可以在头部使用 CSS，但它会被一些支持它们的电子邮件客户端阅读。

<body style="background-color: #fafafa;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper" style="width: 100%;">
  <tbody>
    <tr>
      <td style="padding: 24px 0 24px 0;background-color: #fafafa;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
	
		<table width="90%" border="0" cellspacing="0" cellpadding="0" style="width: 90%;max-width: 680px;min-width: 280px;border: 1px solid #dddddd;background-color: #ffffff !important;box-shadow: 0 4px 8px rgba(192, 192, 192, 0.9);margin: auto;">
  <tbody>
    <tr>
      <td>
		
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="inner" style="color: #505050;font-size: 13px;padding: 24px;background-color: #ffffff;">
	
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="font-size: 30px;line-height: 34px;color: #505050;border-bottom: 1px solid #dddddd;margin-bottom: 32px;padding-bottom: 8px;background-color: #ffffff"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></td>
    </tr>
    <tr>
      <td style="color: #505050;font-size: 13px;padding: 24px 0px; background-color: #ffffff;">Schönen guten Tag {name},<br /> Ihre Anfrage ist bei uns eingegangen. Wir bemühen uns um eine schnelle Antwort, um Ihnen weiterhelfen zu können. Sie hören bald wieder von uns!</td>
    </tr>
    <tr>
      <td style="border-top: 1px solid #dddddd;margin-top: 32px;padding-top: 8px;font-size: 12px;font-style: italic;color: #707070;background-color:#ffffff;">CENSORED</td>
    </tr>
  </tbody>
</table>
	
   
   </td>
    </tr>
  </tbody>
</table>

   
   
   </td>
    </tr>
  </tbody>
</table>
	
   
   </td>
    </tr>
  </tbody>
</table> 
</body>

让我知道这是否适合你。

【讨论】：

请注意，95% 的电子邮件客户端现在支持媒体查询（包括 Gmail），因此您可以使用媒体查询进一步美化您的电子邮件，但请确保为不支持花哨的电子邮件客户端提供备用东西。快乐的编码兄弟。

【解决方案2】：

许多电子邮件客户端会从您的电子邮件中删除 <style> 标记，因此您应该将样式内联。

您可以使用 CSS Inliner Tool 自动执行此操作，就像 Mailchimp 提供的那样。

【讨论】：

在您的 HTML 代码中没有内联 CSS。您引用位于 CSS 中的样式。这很可能是问题所在。
大家好，只是想把它放在那里，超过 95% 的设备现在支持媒体查询（甚至是 Gmail 应用程序）。 Gmail 应用程序有点棘手，但它可以工作。但是，对于像三星手机这样的电子邮件客户端，仍然需要内联。
Gmail 将删除包含它不支持的 css 的样式表。其他客户端确实剥离了样式表。但这并不重要，因为 Outlook 不会删除样式表。因此，我创建了一个特定于 Outlook 的版本来整合 Outlook 特性。
您可以通过在正文中复制 <style> 来克服它被剥离的问题。不好，但它节省了一些电子邮件客户端。我不使用这种方法，但我曾经使用过并且它有效。现在不像过去那样需要内联样式了。

【解决方案3】：

根据您在 html 正文中使用以下样式的 Outlook 特定 css

<!--[if mso]>
  <style type="text/css">
    /*your css here*/ ul { margin: 0px !important; }
  </style>
<![endif]-->

【讨论】：