如何修复 Outlook 2016 中的 HTML 格式

Question

我的 HTML 为 Web 表单生成的代码有问题。
它适用于除 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 中看起来像这样

但它应该是这样的：

我真的希望有人能帮助我:(

Answer 1

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

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

Answer 2

你最好的选择是内联或全部 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>

让我知道这是否适合你。

Answer 3

根据具体的 outlook css，您在 html 正文中使用了以下样式

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

如何修复 Outlook 2016 中的 HTML 格式

How to fix the HTML Formatting in Outlook 2016

html

css

outlook

html-email