Question

在我的spree商店，我正在准备邮件发送订单确认电子邮件，但CSS属性：.arrow:after {left:49%}未出现在提交的电子邮件中。

以下是我的HTML：

.wrap {
  position: relative;
  height:150px;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom:3%;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
  content:'';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom:inherit;
  background-color: inherit;
}
.arrow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  border-right:10px solid red;
  border-top:10px solid red;
}
.arrow:after {
  left: 49%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  border-left:10px solid red;
  border-top:10px solid red;
}

我的CSS：

justify-content

但在呈现的电子邮件中，我看不到属性：<div class="banner"> <img class="height-50perc banner-content" src="https://myUrl" /> <span class="banner-content">Order confirmed</span> </div>。当我检查相应的元素时：它是这样的：

.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;
}

请注意，此justify-content中没有<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px"> .... </div>。我正在Mac中使用chrome和firefox浏览器查看电子邮件。

我也尝试将CSS更改为：

justify-content

但这也没有帮助。

Answer 1

似乎对flex的支持仍然不正确，如link

所述

现在这里是不支持Flexbox的网络邮件：


雅虎

的Gmail

Outlook.com


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

这可能是我甚至无法在呈现的电子邮件中看到justify-content的原因。

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

1 个答案: