在 ie11 中的 flex 容器上显示 :before 元素答案

【问题标题】：Display :before element on a flex container in ie11在 ie11 中的 flex 容器上显示 :before 元素
【发布时间】：2020-09-19 23:07:25
【问题描述】：

我有一个带有几个孩子的 flex 容器，我需要在上面添加一个 before 元素。如果父容器是 display: block 则显示 before 元素，但如果是 display: flex 则不显示！有解决办法吗？

:before 不起作用，但子容器样式很好：

<div class="parent">
  <div></div>
  <div></div>
</div>

<style lang="scss">
.parent {
  display: flex;
  justify-content: space-between;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: linear-gradient(180deg, transparent, $gray);
  }
}
</style>

:before 有效，但破坏了我的子元素样式：

<div class="parent">
  <div></div>
  <div></div>
</div>

<style lang="scss">
.parent {
  display: block;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: linear-gradient(180deg, transparent, $gray);
  }
}
</style>

【问题讨论】：

在 IE11 中使用 block 和 flex 为我工作。
@movac，第一个div元素添加margin-right:auto;后，是否解决了问题？

标签： css flexbox internet-explorer-11

【解决方案1】：

尝试为父容器中的第一个 div 元素添加margin-right:auto; CSS 样式。

代码如下（可以将 CSS 样式改为 SCSS 样式）：

<div class="parent">
    <div style="background-color:coral;">content 1</div>
    <div style="background-color:pink;">content 2</div>
</div>

<style >
    .parent {
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        position: relative;
    }

        .parent::before {
            content: "";
            position: absolute;
            top: -20px;
            height: 20px;
            width: 100%; 
            background: linear-gradient(180deg , red, yellow);
            background-color: aqua;
        }

        .parent div:first-child { 
            margin-right:auto;
        } 
        .parent div {
            width: 70px;
            height: 70px;
            display: block;
        } 
</style>

IE11浏览器中的结果如下：

【讨论】：