时间戳

首页 > 解决方案 > 在表上使用“显示：无”后，无法在 Outlook 中使用“显示：表”

css - 在表上使用“显示：无”后，无法在 Outlook 中使用“显示：表”

问题描述

考虑下面的 HTML 电子邮件。它在顶部有一个通过 CSS 规则隐藏的横幅table {display: none !important;}。然后通过更具体的 CSS 规则再次显示body table {display: table !important;}。这在包括 Internet Explorer 11 在内的所有浏览器中都按预期工作。但是，在 Outlook 中，第二个 CSS 规则似乎没有任何效果。奇怪的是，只是内容隐藏在 Outlook 中，而不是整个表格。但是使用第二条规则不会再次显示内容。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <style>
      table {
        display: none !important;
      }
    </style>
    <style>
      body table {
        display: table !important;
      }
    </style>
  </head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="cellpadding: 0;border: 0;cellspacing: 0;display: table;width: 100%;table-layout: fixed;border-collapse: seperate;float: none;" align="left">
      <tbody>
        <tr>
          <td valign="middle" width="1px" bgcolor="#A6A6A6" cellpadding="7px 2px 7px 2px" style="padding: 7px 2px 7px 2px;background-color: #a6a6a6;valign: middle;"></td>
          <td valign="middle" width="100%" bgcolor="#EAEAEA" cellpadding="7px 5px 7px 15px" color="#212121" style="width: 100%;background-color: #eaeaea;padding: 7px 5px 7px 15px;font-family: wf_segoe-ui_normal, Segoe UI, Segoe WP, Tahoma, Arial,sans-serif;font-size: 12px;font-weight: normal;color: #212121;text-align: left;word-wrap: break-word;">
            <div>This table should be visible.</div>
          </td>
          <td valign="middle" align="left" width="75px" bgcolor="#EAEAEA" cellpadding="7px 5px 7px 5px" color="#212121" style="width: 75px;background-color: #eaeaea;padding: 7px 5px 7px 5px;font-family: wf_segoe-ui_normal, Segoe UI, Segoe WP, Tahoma, Arial,sans-serif;font-size: 12px;font-weight: normal;color: #212121;text-align: left;word-wrap: break-word;align: left;"></td>
        </tr>
      </tbody>
    </table>
    <div>This is a test</div>
  </body>
</html>

从其中一个或两个规则中删除!important无效。如何覆盖初始值display: none并使横幅再次可见？

如果有帮助，这些横幅将由 Office 365 插入，用于在邮件看起来像网络钓鱼时警告用户。一个问题是网络钓鱼邮件可以用几行 CSS 隐藏这些横幅。我正在尝试编写 CSS 以附加到消息的末尾，这将使横幅再次可见。此方法适用于 OWA 和 Outlook for iOS，但不适用于 Outlook for Windows。

这条推文也解释了这个问题。

标签： cssoutlook

解决方案

我怀疑这是否适用于 Outlook 显示。显示：表格！重要；

如果你只保留这条线并删除它是否有效。无论如何，您已经在使用 table html。所以尝试使用

display: block !important;

代替

显示：表格！重要；

我认为表格是为了让 div 显示为表格。但是outlook不支持

推荐阅读