为何我的按钮在不同浏览器中渲染效果不一致？

目标按钮示例 #

我在某网站发现这款复古图形按钮，希望用纯CSS复刻它，同时确保在所有主流浏览器中正常显示。

实现代码 #

CSS代码 #

main {
  margin: 0;
  width: 4.313em;
}

a {
  display: block;
  text-decoration: none;
  text-transform: capitalize;
  background-color: #666699;
  font-size: 0.75em;
  color: #FFF;
  padding: .2em;
  box-sizing: border-box;
  border-bottom: 2px inset rgba(26, 25, 25, 0.8);
  border-left: 2px inset rgba(0, 0, 0, .5);
  border-right: 2px inset rgba(26, 25, 25, 0.8);
  border-top: 2px inset rgb(255, 255, 255);
}

HTML代码 #

<main>
  <a href="index.html">Twitter</a>
</main>

主流浏览器渲染结果 #

Chrome浏览器显示效果 #

Firefox浏览器显示效果 #

内容的提问来源于stack exchange，提问作者Alix Blaine