css - 在 ie11 的 flex 容器上显示 :before 元素

Question

我有一个带有几个孩子的 flex 容器，我需要打开一个 before 元素。如果父容器是，则 before 元素显示，如果是display: block，则不显示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>

标签： cssflexboxinternet-explorer-11

Answer 1

尝试margin-right:auto;为父容器中的第一个 div 元素添加 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 浏览器中的结果如下：