CSS 属性未出现在电子邮件中

Question

在我的狂欢商店中，我正在准备邮件程序在订单确认时发送电子邮件，但 CSS 属性：justify-content未出现在呈现的电子邮件中。

以下是我的 HTML：

  <div class="banner">
    <img class="height-50perc banner-content" src="https://myUrl" />
    <span class="banner-content">Order confirmed</span>
  </div>

我的CSS：

.banner {
  display: flex;
  height: 80px;
  background: linear-gradient(90deg, #2e3092 , #0c5fdc);
  justify-content: space-between;
}

.banner-content {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  font-size: 20px;
}

但在呈现的电子邮件中，我没有看到 property: justify-content。当我检查相应的元素时：它是这样的：

<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px">
    ....
</div>

justify-content注意这里没有div。我正在 Mac 的 Chrome 和 Firefox 浏览器中查看电子邮件。

我还尝试将 CSS 更改为：

.banner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 80px;
  background: linear-gradient(90deg, #2e3092 , #0c5fdc);
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

但这也无济于事。

Answer 1

正如此链接中所解释的，对 Flex 的支持似乎仍然不正确

现在以下是不支持 Flexbox 的网络邮件：

• 雅虎
• 邮箱
• Outlook.com

Gmail 和 Outlook.com 还会过滤与 Flexbox 相关的所有属性（属性 除外）display:flex。

这可能就是为什么我什至无法看到justify-content渲染的电子邮件的原因。