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電子郵件正文沒有被正確呈現

回答

相關問題