2012-12-11 58 views
2

我将以下html作为我生成电子邮件的模板。当我在IE中打开模板时,Chrome浏览器都能正常工作,看起来和预期的一样。电子邮件的HTML模板不按预期方式呈现

<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中

enter image description here

电子邮件窗口是否有人可以告诉我这个问题?

+1

你的'body'标签是空的......你的表格/ 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> 
+0

感谢它的工作。所以电子邮件html不喜欢div –

+1

它看起来不像。 –

3

不幸的是,很多电子邮件客户端并不尊重标题中的样式或css文件。一切都需要内联。您也可能会在Gmail中看到这个问题。

我也建议避免div。表格几乎是电子邮件客户普遍尊重的唯一东西。

1

几年前,我有类似的问题与前景。在我的情况下,解决方案是放弃'HTML','HEADER'和'BODY'标签。那是因为Outlook和其他一些客户创建了自己的标记和他们自己的'HTML','HEADER'和'BODY'标签。 我的解决方案是在'DIV'标签内格式化HTML消息。因此,邮件客户端将我的DIV放入生成的'BODY'标签中,并且所有内容都正确显示。 类似的解释,我发现在互联网上,但现在斜面发现

1

尝试表与内联样式行动统一为所有电子邮件客户端

是这样的:

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) 
     { 
     } 
    } 
-1

如果您使用新的MailMessage(),请改为使用新的MailDefinition()