IE 11中的曲轴箱定心不工作

Flexbox is pretty buggy when it comes to IE per CanIUse ,其中2个提到:

• 在IE10和IE11中,如果具有display:flex和flex direction:column的容器具有最小高度但没有显式高度属性,则该容器将无法正确计算其flexed子容器的大小。见Bug。
• 当使用最小高度时,IE 11不能正确地垂直对齐项目参见错误

这就是说,添加明确的高度作为后备 .score-wrapper 对于IE11。

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}