element的step组件出现错位问题如何解决？

居中的步骤条 align-center
每个步骤都会出现不同程度的错位，当步骤到达下一步骤后前面的步骤的样式才会正常
相关代码可参考element组件
css样式代码有所不同

html部分

      <div class="step">
        <el-steps :active="status" align-center>
          <el-step title="发起" description="陈泽2018-05-10 12:00" icon="icon iconfont iconshixindian"></el-step>
          <el-step title="审核" description="这是一段很长很长很长的描述性文字" icon="icon iconfont iconshixindian"></el-step>
          <el-step title="募捐" description="这是一段很长很长很长的描述性文字" icon="icon iconfont iconshixindian"></el-step>
          <el-step title="已过期" description="这是一段很长很长很长的描述性文字" icon="icon iconfont iconshixindian"></el-step>
        </el-steps>
      </div>

css代码

.step {
      width: 1200px;
      margin: 44px auto 0;
    }
    .el-step__icon.is-icon {
      width: 10px;
      height: 10px;
    }
    .el-step__title.is-process {
      font-weight: 400;
      color: #303133;
    }
    .el-step__head.is-finish {
      color: #fca404;
      border-color: #fca404;
    }
    .el-step__title.is-finish {
      color: #fca404;
    }
    .el-step__description.is-finish {
      color: #fca404;
      height: 60px;
    }
    .el-step__head.is-finish {
      color: #fca404;
    }
    .el-step.is-horizontal .el-step__line {
      height: 2px;
      top: 10px;
    }

在经过测试之后，不知道是在哪里的原因，会使得原本高度统一为97的step，已完成的step的高度变成77，从而会出现错位的情况

如果想要硬着来去解决，就直接用 css ！important 去硬着把step的高度统一

  .el-step{
      height: 97px !important;
    }

目前只是暴力解决，但仍未找到真正的原因
在全局的样式，其他包含step组件的页面CSS也统一使用了scope去避免造成影响其他页面的样式

可能是全局样式跟这个页面的样式有冲突，把上面代码放在这个demo地址（居中的步骤条）中运行并未发现问题

https://element.eleme.cn/#/zh-CN/component/steps