Html电子邮件正文没有被正确呈现

我试图发送一封电子邮件，内含图像嵌入正文。我已经提供了js小提琴，它是由C＃代码生成的html外观。我在js小提琴中使用了更新的src，以便显示图像。 js小提琴可以被访问hereHtml电子邮件正文没有被正确呈现

电子邮件获得正确发送的图像嵌入正文。我的问题是，当我在Outlook中查看它们时，div的样式不一致。对于我提供下面的截图：

正如你可以看到在屏幕截图的div堆叠，其中作为JS拨弄它们对齐。有人能告诉我我要去哪里吗？以下是我的代码。

MailMessage message = new MailMessage(); 
message.To.Add(new MailAddress("to")); 
message.From = new MailAddress("from"); 
LinkedResource res = new LinkedResource(@"C:\TestFolder\TestImage.jpg"); 
message.Subject = "Test Email"; 
message.IsBodyHtml = true; 

StringBuilder sb = new StringBuilder(); 
sb.Append("<html>"); 
sb.Append("<body>"); 
sb.Append("<div style=\"display: flex; justify-content: space-between;\">"); 
sb.Append("<div style=\"width: auto; height: 100px;\">"); 
sb.Append("<img style=\"height: 100px;\" src='cid:" + res.ContentId + @"'/>"); 
sb.Append("</div>"); 
sb.Append("<div style=\"width: auto; height: 100px;\">"); 
sb.Append("<h1>Hello World</h1>"); 
sb.Append("</div>"); 
sb.Append("<div style=\"width: auto; height: 100px;\">"); 
sb.Append("<img style=\"height: 100px;\" src='cid:" + res.ContentId + @"'/>"); 
sb.Append("</div>"); 
sb.Append("</div>"); 
sb.Append("</body>"); 
sb.Append("</html>"); 

AlternateView alternateView = AlternateView.CreateAlternateViewFromString(sb.ToString(), null, MediaTypeNames.Text.Html); 
alternateView.LinkedResources.Add(res); 
message.AlternateViews.Add(alternateView); 

using (var smtp = new SmtpClient()) 
{ 
    var credential = new NetworkCredential 
    { 
     UserName = "email", 
     Password = "password" 
    }; 
    smtp.Credentials = credential; 
    smtp.Host = "host"; 
    smtp.Port = 587; 
    smtp.Send(message); 
}

最后，如果我做sb.ToString()会产生下面的html字符串。

<div style="display: flex; justify-content: space-between;"> 
 
    <div style="width: auto; height: 100px;"> 
 
    <img style="height: 100px;" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg"> 
 
    </div> 
 
    <div style="width: auto; height: 100px;"> 
 
    <h1>Hello World</h1> 
 
    </div> 
 
    <div style="width: auto; height: 100px;"> 
 
    <img style="height: 100px;" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg"> 
 
    </div>

来源

2017-09-25 Izzy

对于后市，你可以用'table'。 'div'工作不正常，'display：flex'也不支持。 –

展望中不支持Flex。见https://litmus.com/community/discussions/1500-using-flexbox-in-an-email为理由 – Adriani6

@ankitapatel谢谢，我不知道！ – Izzy

<div style="width: auto; height: 100px;display:table;width:150px;float:left"> 
     <img style="height: 100px;" src='http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg' /> 
    </div> 
    <div style="width: auto; display:table;width:400px;float:left;text-align:center;"> 
     <h1> 
      Hello World</h1> 
    </div> 
    <div style="width: auto; height: 100px;display:table;width:150px;float:left;text-align:right;"> 
     <img style="height: 100px;" src='http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg' /> 
    </div> 
</div>

来源

2017-09-25 10:07:04

最好是你解释一些东西，然后分享代码 – Valkyrie

outlook电子邮件不支持flex和你用过的一些css。在这里我们必须使用显示表来提供固定宽度以实现您所需的输出。 –

请在任何电子邮件模板中检查此代码并验证相同。它的工作非常完美。 –

Html电子邮件正文没有被正确呈现

回答

相关问题