响应式进度条指示器与css箭头技巧跨浏览器兼容性

Question

我找到了一个非常好的解决方案来制作进度条指示器：

<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>

CSS：

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:''
}

您可以在此处找到来源： enter link description here

我使这段代码响应并且如果你更改display：block to display：tabel和table-cell for li elements，它的工作正常。

我的CSS阴影箭头技巧问题。它在Safari和Mozilla上经纪。你有任何想法解决这个问题吗？