具有css箭头技巧和跨浏览器兼容性的响应进度条指示器

我在这里找到了制作进度条指示器的一个很好的解决方案：

<ul class="progress">
   <li class="active"><a href="">Qualify</a></li>
   <li><a href="">Develop</a></li>
   <li><a href="">Propose</a></li>
   <li><a href="">Close</a></li>
</ul>

您可以在此处找到来源：

如果您将li元素的display:block更改为display:tabel和table cell，我使这段代码具有响应性，并且工作正常

---

我的CSS阴影箭头技巧的问题。它代理Safari和Mozilla。你有办法解决这个问题吗

尝试为相关规则添加供应商前缀此代码有缺陷：transform:rotate45度-webkit变换：旋转45度-moz-box变换：旋转45度；太酷了！如果您使用上面的修改，在Safari下也可以。抱歉，我无法回答我的问题，但这是解决方案。。。

ul.progress li.active {
  background-color: #dc9305;
}

ul.progress li {
  background-color: #7e7e7e;
  position:relative;
  text-indent:0.5em;
}
ul.progress li:after {
  content:'';
  position:absolute;
  right:100%;
  margin-right:0.4em;
  width:1.2em;
  padding-top:1.2em;;
  border:solid white;
  z-index:1;
  transform:rotate(45deg);
  border-bottom:0;
  border-left:0;
  box-shadow:5px -5px 0 3px  #7e7e7e
}
ul.progress li.active:after {
  box-shadow:6px -6px 0 3px #dc9305;
}
ul.progress {
  list-style: none;
  margin: 0.5em;
  padding: 0;
  overflow:hidden;
  white-space:nowrap
}

ul.progress li {
  display:inline-block;
  line-height: 20px;
  height: 20px;
  min-width: 130px;
  position: relative;  
  transition:min-width 0.5s;
}


ul.progress li a {
  padding: 0px 0px 0px 6px;
  color: #FFF;
  text-decoration: none;
}
ul.progress li:hover {
  min-width:300px;
}
ul.progress li:before {
  content:'\2714'
}
ul.progress li.active:before,
ul.progress li.active ~ li:before {
  content:''
}