Display：在ie11中的弹性容器上的元素之前

Posted 2021-04-12

我有一个flex容器，其中有几个孩子，需要在其上添加一个before元素。如果父容器为display: block，则显示before元素，如果父容器为display: flex，则不显示元素。有没有解决方法？

：之前不起作用，但是子容器的样式很好：

<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>

：在工作之前，但破坏了我的子元素样式：

<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>

答案

尝试为父容器中的第一个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浏览器中的结果如下：