Question

我正在尝试创建一个垂直堆积的条形图，以用于电子邮件；该客户端主要是Outlook 2016。

我不想使用图像，因为在我的情况下，将始终要求用户下载图像并且可能不会打扰。 Outlook不支持带有位置的jQuery，JavaScript或div。

这是我必须产生两个相同的小节的非常简单的代码（是的，我知道这很可怕）：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <body>
    <table>
      <tr>
        <td style="height:10px">
          <table style="border: none;border-collapse: collapse;">
            <tr>
              <td style="height:10px">
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt;
                    mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:50px;background-color:red;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt; mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:10px;background-color:green;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="height:10px">
                <p>
                  <table style="border: none;
                      border-collapse: collapse;width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:50px;background-color:red;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
                <p>
                  <table style="border: none;
                      border-collapse: collapse; width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:10px;background-color:green;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>

这很好用，我已经扩展到了看起来像此呈现图表的图表：

但是，当用户在Outlook中转发电子邮件时，它将为我添加<p>标签，并使图表不可读，如下所示：

因此，我正在寻找一种诱骗Outlook的方式，以便它不会插入会导致图表在栏中出现空白的<p>标签，或者在第一种方法中创建图表仅使用HTML和CSS放置。没有jQuery，没有JavaScript，也没有带有浮点数的div。

Answer 1

从2007年到2019年，Windows上的Outlook使用Word的呈现引擎，并且确实添加了许多<p>和其他内容。据我所知，没有办法阻止这种情况。但是，如果首先使用适当的样式添加它们自己（margin:0以重置默认段落样式），则应该可以。但是在您的示例中，您甚至不需要首先添加段落。这是从您的代码简化的完整工作示例（我在真实的Outlook 2019上对此进行了测试，并且在回复或转发时代码保持稳定）：

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacked bar chart</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:50px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:10px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:10px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:50px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

如果这对您不起作用，则另一种方法可能是use VML to render the entire graph。但这仅适用于使用Word渲染引擎或与VML兼容的Outlook客户端。

html仅垂直堆叠的条形图

1 个答案: