Question

有时当我发送电子邮件时，我会收到回复，说明我的电子邮件是空的。它似乎非常随机，到目前为止我还没有能够重建这个问题（已经在Gmail，雅虎，AOL，Outlook，Mozilla Thunderbird上测试过它......）无济于事。似乎只显示了我的电子邮件签名和/或有时也只显示了我的电子邮件的开头。

我已检查邮件的html代码中的字体问题和问题等。

我应该从哪里开始？

以下是我使用的模板的一些示例代码，似乎随机创建了这个错误：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      ...
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if !mso]>
<!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
<![endif]-->
  <style>
    html, body{
      margin: 0;
      padding: 0;
    }
  </style>
  </head>
  <body style="width: 100%; margin: 0;">
    <table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
      <tbody>
        <tr>
          <td style="width:100%;max-width:600px;margin:0 auto">
            <div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
              <table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
                <!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
  <tbody>
    <tr>
      <td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
        <img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
      </td>
    </tr>
  </tbody>
  <!--[if mso]>
</table>
<![endif]-->
  </table>
  </div>
  </td>
  </tr>
  </tbody>
  </table>
  <table style="width: 100%; border-collapse: collapse;" align="center" border="0">
    <tbody>
      <tr>
        <td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
          <div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
            <table style="border-collapse: collapse; width: 100%;">
              <!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
  <tbody>
    <tr>
      <td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
        <p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
          Content
        </p>
      </td>
    </tr>
    <!--[if mso]>
</table>
<![endif]-->
  </tbody>
  </table>
  </div>
  </td>
  </tr>
  </tbody>
  </table>
  <table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
    <tbody>
      <tr>
        <td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
          <div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
            <table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
              <!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
  <tbody>
    <tr>
      <td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
        <p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
          Footer
          <br>
          <br>
          <a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
            <span style="color: #278ac8; text-decoration: none;">
              CLICK TO UNSUBSCRIBE
            </span>
          </a>
        </p>
      </td>
    </tr>
  </tbody>
  </table>
  </div>
  </td>
  </tr>
  </tbody>
  </table>
  </body>
</html>

Answer 1

我找到了这个问题的答案。它似乎是（早期）IE版本中的一个错误（谁猜到了......）。

问题的关键部分是DIV元素中左右1％填充作为容器。

  <body style="width: 100%; margin: 0;">
    <table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
      <tbody>
        <tr>
          <td style="width:100%;max-width:600px;margin:0 auto">


            // this DIV has right and left padding of 1% which causes a bug in IE
            <div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">


              <table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
                <!--[if mso]>
                  ... and so on

结果是，在某些邮件客户端（Gmail，AOL，Comcast，或许还有其他一些邮件客户端）中，邮件的容器呈现为巨大的宽度（大约100,000px，当然没有明显的原因）其填充花了大约每侧1000px。

由于内容集中在内，因此打开邮件的人根本就不在视线范围内（没有普通人有这么大的屏幕）

我用3px填充替换了1％填充，这解决了问题。

下面是一个显示问题的屏幕截图，在IE8中呈现。解决方案是如上所述更改填充。

发送的电子邮件有时会在没有内容的情

1 个答案: