CSS justify-content:space-between IE11 工作不正确

Question

在我的项目中，我有进度条，它在所有浏览器中都能正常工作，除了 IE11（

在 IE11 中它看起来像这样： 我不知道为什么 IE11 上的 justify-content: space-between 工作不正确。 这是我的状态栏容器代码：

export const ProgressBarContainer = styled.div`
  display: flex;
  display: -ms-flexbox;
  width: 95%;
  flex-direction: row;
  -ms-flex-direction: row;
  justify-content: space-between;
  -ms-justify-content: space-between;
  margin-left: 20px;
  position: relative;
`;

export const ProgressLineStyled = styled.div`
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 11px;
  height: 2px;
  background: ${({ theme }) => theme.lightText};
  z-index: 0;
`;

export const ResultLineStyled = styled(ProgressLineStyled)`
  background: #445b9d;
  width: auto;
`;

这是我的状态栏项目代码：

export const ItemText = styled.div`
  font-size: 12px;
  color: ${({ theme }) => theme.text};
  text-transform: uppercase;
  font-weight: 600;
  position: absolute;
`;

export const ItemDot = styled.div`
  width: 24px;
  height: 24px;
  margin-top: 24px;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -ms-flex-pack: center;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 1;
  background: #ffffff;
  border: 2px solid ${({ theme }) => theme.lightText};
  & div {
    border-radius: 50%;
    box-sizing: border-box;
  }
`;

export const ProgressItemStyled = styled.div`
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -ms-flex-align: center;

  &#select {
    ${ItemText} {
      color: #445b9d;
    }
    ${ItemDot} {
      border: 2px solid #445b9d;
      & div {
        width: 6px;
        height: 6px;
        border: 1px solid #445b9d;
        background: #445b9d;
      }
    }
  }
  &#completed {
    ${ItemDot} {
      background: #445b9d;
      border-color: #445b9d;
      & div {
        width: 6px;
        height: 6px;
        border: none;
        background: #ffffff;
      }
    }
  }
`;

Answer 1

我通常使用这些 mixin：

  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: space-between;

另外，也许问题出在你的父母身上，请查看this，也许会有所帮助。

Answer 2

只需将-ms-flex-pack: space-between; 替换为-ms-flex-pack: justify;