在 table 上使用 "display: none" 后无法在 Outlook 中使用 "display: table"

Question

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

<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 以附加到消息的末尾，这将使横幅再次可见。此方法适用于 iOS 的 OWA 和 Outlook，但不适用于 Windows.

的 Outlook

this tweet 中也解释了该问题。

Answer 1

您同时使用了 style 元素 (<style>) 和内联样式 (style="...")

所以您需要知道可能存在冲突... 据我所知，Outlook 使用内联样式效果更好，

所以尽量只选择这个并使用它，如果这是一个选项。否则你将需要同时更新两者。

Answer 2

When using CSS in email it is preferable to use Inline CSS. Avoid embedded and external CSS in HTML emails. Because browser-based email applications, such as Gmail, strip out <head> > and <body> tags by default, always use inline CSS over embedded CSS.

General CSS tips and troubleshooting

CSS in HTML emails

Answer 3

我怀疑这在 outlook 显示中是否有效。显示：table！重要；

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

display: block !important;

而不是

显示：table！重要；

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

在 table 上使用 "display: none" 后无法在 Outlook 中使用 "display: table"

Can't use "display: table" in Outlook after using "display: none" on table

css

outlook