Question

我有以下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中的电子邮件窗口时，它会延伸。

enter image description here

有人可以告诉我这个问题吗？

Answer 1

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

我还建议避免使用div。表几乎是电子邮件客户端普遍尊重的唯一内容。

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

Answer 3

几年前，我的前景也有类似的问题。在我的情况下，解决方案是放弃'HTML'，'HEADER'和'BODY'标签。这是因为outlook和其他一些客户创建了自己的标记，并分别创建了自己的“HTML”，“HEADER”和“BODY”标签。我的解决方案是在'DIV'标签内格式化HTML消息。因此，邮件客户端将我的DIV放入生成的“BODY”标记中，并且所有内容都正确显示。我在互联网上发现了类似的解释，但现在无法找到它

Answer 4

尝试使用内联样式的表格为所有电子邮件客户端执行统一

类似的东西：

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

Answer 5

如果您使用新的MailMessage()，请使用新的MailDefinition()。

电子邮件的HTML模板未按预期呈现

5 个答案: