Internet Explorer 中的步进器已经粉碎了圈子

Question

我正在 Angular 12 中创建一个步进器组件，尽管它在任何地方都可以正常工作，但在 Internet Explorer 11 中我已经粉碎了圆圈并且步进器超出了它的边界。 对我来说，主要问题是在 IE11 中制作普通圆圈，因为它实际上仅在使用步进器的“常规”变体时才会发生。 如果我使用“LIGHT”，它可以完美运行，我搜索了一个答案，试图解决这个问题而没有找到它。

这是代码：

进度跟踪器.html

<div role="group">
<ol
  class="progress-tracker"
  [class.progress-tracker--light]="variant !== 'REGULAR'"
>
  <ng-container *ngFor="let item of progressSteps; let i = index">
    <li *ngIf="i !== 0" role="separator">
      <span
        class="progress-tracker__separator"
        [class.progress-tracker__separator--done]="
          item.state !== progressTrackerStateEnum.REST
        "
      ></span>
    </li>
    <li>
      <span
        class="progress-tracker-item"
        [class.progress-tracker-item--active]="
          item.state === progressTrackerStateEnum.ACTIVE
        "
        [class.progress-tracker-item--done]="
          item.state === progressTrackerStateEnum.DONE
        "
      >
        <span
          class="progress-tracker-item__title"
          [class.progress-tracker-item__title--active]="
            item.state === progressTrackerStateEnum.ACTIVE
          "
          [class.progress-tracker-item__title--done]="
            item.state === progressTrackerStateEnum.DONE
          "
        >
          {{ item.title | titlecase }}
        </span>
        <span
          *ngIf="item.description"
          class="progress-tracker-item__description"
          [class.progress-tracker-item__description--active]="
            item.state === progressTrackerStateEnum.ACTIVE
            
          "
          [class.progress-tracker-item__description--done]="
            item.state === progressTrackerStateEnum.DONE
          "
          >{{ item.description }}</span
        >
      </span>
    </li>
  </ng-container>
</ol>
</div>

进度跟踪器.scss

.progress-tracker-item {
  max-height: 1.5rem;
  max-width: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.progress-tracker {
  margin-top: 1rem;
  padding-inline-end: 40px;
  display: flex;

  & li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & li[role="separator"] {
    width: 100%;
  }

  &__separator {
    display: inline-block;
    height: 4px;
    background-color: #d9d9d9;
    width: 100%;

    &--done {
      background-color: #4ea1ff;
    }
  }

  &--light {
    .progress-tracker__separator {
      height: 1rem;
      background-color: #f2f2f2;

      &--done {
        background-color: #b3d6ff;
      }
    }

    .progress-tracker-item {
      width: 0;
      height: 1rem;
      box-shadow: none;
      border-collapse: collapse;

      &::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        display: inline-block;
        border-radius: 50%;
        top: 0;
        background-color: #d9d9d9;
        transform: translateX(-50%);
      }

      &--done {
        &::after {
          background-color: #4ea1ff;
        }
      }

      &--active {
        &::after {
          background-color: #004da2;
        }
      }

      &__description {
        display: none;
      }

      &__title {
        top: 15px;
      }
    }
  }
}

.progress-tracker-item {
  font-size: 0.875em;
  line-height: 22px;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px #d9d9d9 inset;
  border-collapse: separate;

  &--done {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 0 3px #4ea1ff inset;
    border-collapse: separate;

    &:hover {
      box-shadow: 0 0 0 3px #1b87ff inset;
      border-collapse: separate;
    }
  }

  &--active {
    cursor: pointer;
    box-shadow: 0 0 0 4px #004da2 inset;
    border-collapse: separate;

    &:hover {
      box-shadow: 0 0 0 4px #003e81 inset;
      border-collapse: separate;
    }
  }

  &__title {
    text-align: center;
    word-break: keep-all;
    color: #a6a6a6;
    position: absolute;
    width: 6.5rem;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);

    &--active {
      color: #004da2;
    }

    &--done {
      top: calc(#{-24px} - (#{1rem} / 2) / 2);
    }
  }

  &__description {
    text-align: center;
    color: #a6a6a6;
    position: absolute;
    width: 6.5rem;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);

    &--active {
      color: #202124;
    }

    &--done {
      top: calc(#{27px} - (#{1rem} / 2) / 2);
    }
  }
}

我也把代码放到了 github 上，如果你想尝试，它已经配置为在 IE11 中启动。 这是回购： https : //github.com/gabax/test-app

先感谢您。

Answer 1

经过一些简单的测试，我发现问题应该是display:flex在 IE 中无法正常工作。 您可以参考本文档了解相关信息。 如果您需要使用REGULAR ，我建议您可以为其子元素添加高度和宽度以使其工作，如下所示：

.progress-tracker {
  margin-top: 1rem;
  padding-inline-end: 40px;
  display: flex;

  & li {
    width:50px;      //add in sub element
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }