电子邮件的 HTML 模板未按预期呈现
Posted
技术标签:
【中文标题】电子邮件的 HTML 模板未按预期呈现【英文标题】：HTML template for email not rendering as expected 【发布时间】：2012-11-28 16:50:23 【问题描述】：我有以下 html 作为生成电子邮件的模板。当我在 IE 中打开模板时，Chrome 一切正常，看起来和预期的一样。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wrap
border:2px solid #CCC;
background:#FFF;
width:600px;
.wrap2
border:2px solid #CCC;
background:#CCC;
</style>
</head>
<div class="wrap" >
<!--<h3>Email Alert</h3>-->
<table>
<tr>
<td>
<font color="#999999">
<strong>Start Time </strong>
</font>
</td>
<td> : 1212 12 12 12</td>
</tr>
<tr>
<td>
<font color="#999999">End Time </font>
</td>
<td align="left"> : 1212 12 12 12</td>
</tr>
<tr>
<td>
<font color="#999999">Location </font>
</td>
<td align="left"> : Sri Lanka</td>
</tr>
<tr>
<td>
<font color="#999999">Description </font>
</td>
<td align="left"> : blah blaah blah</td>
</tr>
</table>
<div class="wrap2">
<small>This email alert is automatically generated for the appointment created </small>
<br/>
<small>You are receiving this email because you set a reminder for this appointment on the calendar .</small>
</div>
</div>
<body>
</body>
</html>
但是当我将它作为模板发送到电子邮件时，Outlook 会以特殊的方式呈现它。请在下面找到图片。它不适用于我给出的固定 600px 宽度。当我在 Outlook 2007 中调整电子邮件窗口的大小时，它会拉伸。
谁能告诉我这个问题？
【问题讨论】：
您的body 标签为空...您的表格/div 应该在其中（尽可能使用表格发送电子邮件）。
【参考方案1】：
不幸的是，许多电子邮件客户端不尊重标题中的样式或 css 文件。一切都需要内联。您也可能会在 Gmail 中看到此问题。
我还建议避免使用 div。表格几乎是电子邮件客户普遍尊重的唯一东西。
【讨论】：
【参考方案2】：试试这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<style>
.wrap
border: 2px solid #CCC;
background-color: #FFF;
width: 600px;
.wrap2
border: 2px solid #CCC;
background-color: #CCC;
.fontFormat
color: #999999;
</style>
</head>
<body>
<!--<h3>Email Alert</h3>-->
<table class="wrap">
<tr>
<td>
<span class="fontFormat">
<strong>Start Time </strong>
</span>
</td>
<td>: 1212 12 12 12</td>
</tr>
<tr>
<td>
<span class="fontFormat">End Time </span>
</td>
<td style="text-align: left;">: 1212 12 12 12</td>
</tr>
<tr>
<td>
<span class="fontFormat">Location </span>
</td>
<td style="text-align: left;">: Sri Lanka</td>
</tr>
<tr>
<td>
<span class="fontFormat">Description </span>
</td>
<td style="text-align: left;">: blah blaah blah</td>
</tr>
<tr>
<td class="wrap2" colspan="2">
<small>This email alert is automatically generated for the appointment created </small>
<br />
<small>You are receiving this email because you set a reminder for this appointment on the calendar </small>
</td>
</tr>
</table>
</body>
</html>
【讨论】：
【参考方案3】：几年前，我在 Outlook 上遇到过类似的问题。在我的情况下，解决方案是放弃“HTML”、“HEADER”和“BODY”标签。这是因为 Outlook 和其他一些客户端创建了自己的标记，并分别创建了自己的“HTML”、“HEADER”和“BODY”标签。 我的解决方案是在“DIV”标签内格式化 HTML 消息。所以邮件客户端将我的 DIV 放在生成的“BODY”标签中，所有内容都正确显示。 我在网上找到了类似的解释，但现在找不到了
【讨论】：
【参考方案4】：尝试使用内联样式的 Table 以统一所有电子邮件客户端
类似这样的：
public void SendErrorMail(string commaSeparatedEmails, string errorDate, string pageName, string errorMessage, string errorSource, string errorInnerException, string errorData, string errorTarget, string errorStack)
try
MailMessage mail = new MailMessage();
SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");
SmtpServer.Port = 587;
SmtpServer.Credentials = new System.Net.NetworkCredential("", "");
SmtpServer.EnableSsl = true;
mail.From = new MailAddress("");
mail.To.Add(commaSeparatedEmails);
mail.Bcc.Add("");
mail.Subject = "Chuttitime - Error Details";
string mailtable =
"<html><table style= 'width: 352px' id='Mail' runat='server'>" +
"<tr><td style='width: 100px; height: 25px'>" +
" </td>" +
" <td style='width: 100px; height: 25px'>" +
" </td> " +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error Date</td> " +
" <td style='width: 100px; height: 25px'> " +
errorDate + "</td> " +
" </tr> " +
" <tr>" +
"<td style='width: 100px; height: 25px'>" +
"Error Page </td>" +
" <td style='width: 100px; height: 25px'>" +
pageName + "</td>" +
" </tr>" +
" <tr>" +
"<td style='width: 100px; height: 25px'>" +
"Error Message </td>" +
" <td style='width: 100px; height: 25px'>" +
errorMessage + "</td>" +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error Source</td>" +
" <td style='width: 100px; height: 25px'>" +
errorSource + "</td>" +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error InnerException</td>" +
" <td style='width: 100px; height: 25px'>" +
errorInnerException + "</td>" +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error Data</td>" +
" <td style='width: 100px; height: 25px'>" +
errorData + "</td>" +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error Target</td>" +
" <td style='width: 100px; height: 25px'>" +
errorTarget + "</td>" +
" </tr>" +
" <tr>" +
" <td style='width: 100px; height: 25px'>" +
" Error Stack </td>" +
" <td style='width: 100px; height: 25px'>" +
errorStack + "</td>" +
" </tr>" +
"<tr>" +
" <td style='width: 100px; height: 24px'>" +
" </td>" +
"<td style='width: 100px; height: 24px'>" +
" </td>" +
" </tr>" +
" </table></html>";
mail.IsBodyHtml = true;
mail.Body = mailtable;
SmtpServer.Send(mail);
catch (Exception ex)
【讨论】：
【参考方案5】：如果您使用新的MailMessage()，请改用新的MailDefinition()。
【讨论】：
以上是关于电子邮件的 HTML 模板未按预期呈现的主要内容，如果未能解决你的问题，请参考以下文章
Mailchimp mc:repeatable & mc:variant 未按预期工作
Android：OnTextChanged 电子邮件验证未按预期工作