c# - Outlook 电子邮件中 ​​HTML 页面的格式丢失

Question

我正在尝试通过 C# 代码发送 HTML 电子邮件。一切正常。我可以发送带有 Logo 和图标的电子邮件。我面临的唯一问题是，当我将电子邮件发送到 Outlook 时， header 的格式会丢失。下面是我的代码:

 <div class="container">
        <div class="logo">
          
            <img src="Images/delete.png" alt="RAC" width="80" height="80" />
           
        </div>
        <div class="names">
      
            <div class="name1">This is City Name</div>
            <div class="name2">This is company Name</div>
        </div>
    </div>

这是样式表:

<style>

        .container {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #335970;
            width:100%;
        }

        .logo {
            margin-right: 10px;
        
        }

        .names {
            display: flex;
            flex-direction: column;
        }

        .name1 {
            font-size: 25px;
            color: #e9c46a;
           
        }

        .name2 {
            font-size: 25px;
            color: white;
        }
    </style>

这是 HTML 页面上的屏幕外观:

当我将电子邮件发送到 Outlook 时，屏幕如下所示:

公司名称和城市名称均移动到图标下方。我尝试将 flex 方向更改为行，但这并没有解决任何问题。我还尝试了 Outlook 缩放设置，它设置为 100%。这是发送电子邮件的 C# 代码:

SmtpClient 客户端 = new SmtpClient();

        client.Credentials = new NetworkCredential("test", EmailPass);
        client.Port = 200;
        client.EnableSsl = true;
        client.Host = "smtp.office365.com";
        client.DeliveryMethod = SmtpDeliveryMethod.Network;
        
         MailMessage mail = new MailMessage();
       
        mail.IsBodyHtml = true;
        mail.From = test;

        mail.To.Add(new MailAddress("<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a397a3f9b4b8ba" rel="noreferrer noopener nofollow">[email protected]</a>"));
        mail.Subject = "test";
        using(StreamReader reader = new StreamReader(Server.MapPath("~/EmailTemplate.html")))
        {
            body = reader.ReadToEnd();
        }

        mail.Body = body;

        client.Send(mail);

对于 HTML 中 header 格式丢失的任何帮助，我们将不胜感激。我也尝试使用这样的表标签:

 <table style="background-color: #335970;width:100%;padding:10px">
        <tr>
            <td rowspan="3">
                <img src="Images/delete.png" height="80" width="80" />
            </td>
        </tr>
        <tr>
            <td class="name1">This is City Name</td>
        </tr>
        <tr>
            <td class="name2">This is company Name</td>
        </tr>
    </table>

这样，图像和文本之间就有了巨大的空间。请参阅下面的屏幕截图:

我的问题与 HTML 样式无关，而是与 Outlook 有关。为什么我在outlook邮件里看不到变化。内森回答了我的问题。

Answer 1

Outlook 使用 MS Word 来呈现电子邮件，而不是 Web 标准解析器。

Div、flex 和大多数几乎所有东西都不起作用:https://www.caniemail.com/clients/outlook/#windows

您需要为此使用表格布局。并内联所有样式 - 不要使用 <style> block 。