[英]HTML template for email not rendering as expected
我将以下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" width="600">
<!--<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中调整电子邮件窗口的大小时,它会延伸。
有人可以告诉我这个问题吗?
不幸的是,许多电子邮件客户端不遵循标题中的样式或css文件。 一切都需要内联。 Gmail也可能会出现此问题。
我也建议避免使用div。 表格几乎是电子邮件客户端普遍会尊重的唯一内容。
尝试这个:
<!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>
几年前,我对Outlook也有类似的问题。 在我的情况下,解决方案是放弃“ HTML”,“ HEADER”和“ BODY”标签。 那是因为Outlook和其他一些客户端创建了自己的标记,并分别创建了自己的“ HTML”,“ HEADER”和“ BODY”标签。 我的解决方案是在“ DIV”标签内格式化HTML消息。 因此,邮件客户端将我的DIV放入生成的“ BODY”标签中,并且所有内容均正确显示。 我在互联网上找到了类似的解释,但现在找不到
尝试使用内联样式的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)
{
}
}
如果使用new MailMessage()
改用new MailDefinition()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.