HTML 电子邮件未正确显示

Posted

技术标签:

【中文标题】HTML 电子邮件未正确显示【英文标题】:HTML email not displaying correctly 【发布时间】:2011-04-10 13:24:23 【问题描述】:

我在用 c# 发送 html 邮件时遇到了一个奇怪的问题。

基本上,我每天早上都会尝试通过电子邮件向自己发送天气信息,我首先从 ftp 站点下载 HTML 标记中的天气。

获得源文件后,我将其读入字符串并使用以下代码创建邮件消息。

string body = File.ReadAllText(@"C:\Weather.htm");

MailMessage mailMessage = new MailMessage();
SmtpClient mailClient = new SmtpClient("smtp.gmail.com");

mailClient.Credentials = new NetworkCredential(username, password);
mailClient.Port = 587;
mailClient.EnableSsl = true;
mailMessage.From = new MailAddress(emailFrom);
mailMessage.IsBodyHtml = true;    
mailMessage.To.Add(emailTo);
mailMessage.Subject = "Test Email";
mailMessage.SubjectEncoding = System.Text.Encoding.Unicode;
mailMessage.Body = body;
mailMessage.BodyEncoding = System.Text.Encoding.Unicode;
mailClient.Send(mailMessage);

问题是,虽然电子邮件以 HTML 格式到达,但所有的 DIV / CSS 都没有得到尊重,而且看起来很奇怪。我尝试通过电子邮件发送到不同的电子邮件地址和客户端,它看起来和尝试不同的编码一样。

所以在某个地方出了点问题。

有谁知道如何解决这个问题并获得格式正确的电子邮件?

好形象

坏图像

源标记

<html xmlns="http://www.w3.org/1999/xhtml"><head xmlns="">
        <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sydney Forecast</title>
        <link rel="stylesheet" type="text/css" href="http://www.bom.gov.au/watl/standard/common.css">
        <link rel="stylesheet" type="text/css" href="http://www.bom.gov.au/weather-services/styles/text-gfe.css">
    </head>
    <body>
        <div class="product">
            <p xmlns="" class="p-id">IDN10064</p>
            <p xmlns="" class="source">Australian Government Bureau of Meteorology<br/>New South Wales
            <h2 xmlns="">Updated Sydney Forecast</h2>
            <p xmlns="" class="date">Issued at 8:11 am&nbsp;EST on Thursday 9 September 2010<br>for the period until midnight EST&nbsp;Wednesday 15 September 2010.</p>
            <h3 xmlns="" class="warning">Warning Summary at issue time</h3>
            <p xmlns="">Nil.</p>
            <p xmlns="" class="p-id">Details of warnings are available on the Bureau's website www.bom.gov.au, by telephone 1300-659-218* or through some TV and radio broadcasts.</p>
            <h3 xmlns="" class="day">Forecast for the rest of Thursday</h3>
            <p xmlns="" class="sl">Cloud increasing. Areas of rain this afternoon and evening. Winds northerly averaging up to 20 km/h.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">A little rain later.</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                </div>
                <div class="line">
                    <div class="rain_l">Chance of any rainfall:</div>
                    <div class="rain_prob_v">30%</div>
                    <div class="rain_l">Chance of no rainfall:</div>
                    <div class="rain_prob_v">70%</div>
                    <div class="rain_l">Rainfall:</div>
                    <div class="rain_v">0 to 1 mm</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Late rain.</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                </div>
                <div class="line">
                    <div class="rain_l">Chance of any rainfall:</div>
                    <div class="rain_prob_v">30%</div>
                    <div class="rain_l">Chance of no rainfall:</div>
                    <div class="rain_prob_v">70%</div>
                    <div class="rain_l">Rainfall:</div>
                    <div class="rain_v">0 to 1 mm</div>
                </div>
                <div class="line">
                    <div>
                        <h4>Around Sydney</h4>
                    </div>
                </div>
                <div class="line">
                    <div class="name">Liverpool</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                    <div class="name">Parramatta</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                </div>
                <div class="line">
                    <div class="name">Terrey Hills</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">19</div>
                    <div class="name">Campbelltown</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">19</div>
                </div>
                <div class="line">
                    <div class="name">Richmond</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                    <div class="name">Bondi</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">19</div>
                </div>
            </div>
            <p xmlns="" class="sl">Fire Danger: Low to Moderate [0-11]</p>
            <p xmlns="" class="sl">UV Alert from 9:10 am to 2:40 pm, UV Index predicted to reach 6 [High]</p>
            <h3 xmlns="" class="day">Forecast for Friday</h3>
            <p xmlns="" class="sl">Partly cloudy. Winds west to northwesterly averaging up to 25 km/h tending westerly up to 40 km/h around midday.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Becoming windy.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">13</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">22</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Partly cloudy. Becoming windy.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">11</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">23</div>
                </div>
            </div>
            <h3 xmlns="" class="day">Forecast for Saturday</h3>
            <p xmlns="" class="sl">Sunny. Winds west to southwesterly averaging up to 25 km/h tending mainly southeast to southwesterly up to 20 km/h around midday.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">12</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">21</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">9</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">22</div>
                </div>
            </div>
            <h3 xmlns="" class="day">Forecast for Sunday</h3>
            <p xmlns="" class="sl">Mostly sunny. Light winds.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Mostly sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">10</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">21</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">6</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">23</div>
                </div>
            </div>
            <h3 xmlns="" class="day">Forecast for Monday</h3>
            <p xmlns="" class="sl">Becoming cloudy. Isolated showers later in the day. Winds west to southwesterly averaging up to 25 km/h.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Shower or two developing.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">13</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">22</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Shower or two developing.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">10</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">22</div>
                </div>
            </div>
            <h3 xmlns="" class="day">Forecast for Tuesday</h3>
            <p xmlns="" class="sl">Sunny. Light winds tending north to northeasterly up to 20 km/h during the evening.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">12</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">19</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Sunny.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">10</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">19</div>
                </div>
            </div>
            <h3 xmlns="" class="day">Forecast for Wednesday</h3>
            <p xmlns="" class="sl">Isolated showers during the morning. Sunny afternoon. Winds northwesterly averaging up to 25 km/h tending westerly up to 35 km/h during the morning.</p>
            <div xmlns="" class="grid">
                <div class="line space-b">
                    <div class="name">City Centre</div>
                    <div class="wx">Shower or two clearing.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">12</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">20</div>
                </div>
                <div class="line space-b">
                    <div class="name">Penrith</div>
                    <div class="wx">Shower or two clearing.</div>
                    <div class="min_l">Min</div>
                    <div class="min_v">8</div>
                    <div class="max_l">Max</div>
                    <div class="max_v">21</div>
                </div>
            </div>
            <p xmlns="" class="dt">The next routine forecast will be issued at 4:20 pm&nbsp;EST&nbsp;Thursday.</p>
            <p xmlns="" class="p-id">* Calls to 1300 numbers cost around 27.5c incl. GST, higher from mobiles or public phones.</p>
        </div>
</html>

【问题讨论】:

我看不到您的图片,因为我不是该网站的高级会员,我拒绝付款或等待那么久。抱歉...但是 html 看起来不错...这里有很多可能的变量,从电子邮件客户端开始。不同的客户端以不同的方式呈现 html。不在那里并且能够得到它,那将是我开始的地方。 如果您等待几秒钟,它将显示您 - 有一个倒数计时器... 倒计时两次..一次是几秒钟(我可以处理),现在从 20 分钟开始倒计时。同时,您的邮件客户端是什么? 我强烈建议您不要再使用该网站。没有人会为了帮助回答你的问题而玩他们的游戏。您是否尝试单击编辑工具栏中的“图片”按钮?它允许您从计算机上传图像。 外部 css 链接不太可能在电子邮件中工作。您至少还需要将 css 设置放入您的电子邮件中。检查下面我的答案中的链接。 【参考方案1】:

网页支持的 CSS 设置在电子邮件中并非 100% 支持。所以内容呈现不同是正常的。

此外,不建议在电子邮件中使用 div,因为表格是电子邮件内容的更安全选择。

检查链接: http://css-tricks.com/using-css-in-html-emails-the-real-story/ http://www.campaignmonitor.com/css/

【讨论】:

【参考方案2】:

许多电子邮件客户端会删除出现在正文标记上方的所有内容(即您的 CSS 链接) - 如果您将所有 CSS 内联会发生什么?

This link 可能会提供一些有用的帮助

【讨论】:

【参考方案3】:

“坏”图像看起来与未应用 CSS 时 HTML 的呈现方式完全相同。如果您使用的是网络邮件,请使用 HTTPFox 之类的东西来检查浏览器是否甚至请求 CSS 文件 - 作为反垃圾邮件措施的一部分,它们可能会被抑制(不会自动加载远程内容)。如果它是真正的邮件客户端(Outlook、Thunderbird 等),请使用有线嗅探器并进行相同的检查。

很可能您必须下载 css 并将其嵌入内联,最好是在 &lt;body&gt; 标记之后的某个位置。

【讨论】:

【参考方案4】:

我最近不得不做这种类型的项目。尝试写入最低公分母,例如 OE 6 和更早版本。 OE 6.0 和更早版本的 CSS 呈现方式将不一致 - 即使它嵌入在标题中。与体内的 DIV 相同。

(取自 Yahoo Answers 09-09-2010 1)

最佳答案 - 选民选择 这肯定取决于哪个 您正在使用的 Outlook 版本。任何 这样做,可能只支持内联 样式...

 <p style=" color:red; ">this is red</p>

...但肯定不是链接样式 表,可能不是样式表 在头脑中。

建议的解决方案:将源行转换为 HTML 2.0 格式的表格行。

从您的源代码中,使用嵌入式样式以编程方式将每一行转换为 HTML 2.0 表格行。然后在正文中附加每个表格行。最后,关闭表格。

这是获得所需结果的最可靠方法(无需远程加载预先格式化的图像)。

如果您想在表格中包含图像,您可以远程加载它们,或者,您可以将它们作为附件插入,并在表格正文中引用附件。我尝试使用 64 位图像编码,但在电子邮件客户端中并不一致。我选择了附件方法,因为我不想依赖服务器来远程加载图像。

【讨论】:

以上是关于HTML 电子邮件未正确显示的主要内容,如果未能解决你的问题,请参考以下文章

防弹背景图像在 Outlook 中未正确显示 - 电子邮件

Mandrill 未显示正确的抄送信息

Netsuite:事务的 HTML/电子邮件子列表未正确循环

当前用户电子邮件 ID 未更新正确格式

使用 mailkit 发送的多部分电子邮件的文本/纯文本版本未正确接收

iOS 10 邮件 HTML 未正确响应