Bottom positioning varies between Firefox And Chrome/IE

Question

First-off, I have tried several SO solutions regarding positioning between browsers and while the answer may have been in one of them it was not apparent to me and the attempts I made in line with solutions provided failed.

Display differences between Firefox and Chrome/IE

1 pixel difference between Firefox and Chrome

I am trying to create a tab control with a bottom arrow which indicates the selected Tab. My problem is that firefox does not position the arrow the same as IE and Chrome.

I am using the bottom property to postion the arrow and I've read a few posts on SO where it advises not using bottom in this case but to instead leverage margin-bottom. I attempted to muck about with margin-bottom instead but only ended up with disastrous results.

How do I fix this CSS so that the bottom arrows are consistent between Chrome,IE and Firefox?

(Complete code snippet added below as well)
http://plnkr.co/edit/MlNz4a2cC00QGqaDEucc?p=preview

document.addEventListener("DOMContentLoaded", function(event) {
  var app=angular.module("app",[]).controller("appCtrl",function(){
    this.selectedTab ="A";
  });
  angular.bootstrap(document,[app.name]);
});

/*Arrow Tabs*/
/**************************/
.tab-container{
  width:100%;
  border-bottom:solid 1px silver;
  position:relative;
  height:30px;
}

.tab {
  display: inline;
  position: relative;
  cursor: pointer;
  margin:1em;
}

.tab .tab-label {
  opacity:0.5;
}

.tab.selected .tab-label{
  opacity:1;
}

.tab-label{
  font-size:11px;
  color: #A69A88;
  text-transform: uppercase;
}

.tab-arrow {
  position: absolute;
  left: calc(50% - 5px);
  background: #fff;
  border: 1px solid transparent;
}

.tab-arrow:after, .tab-arrow:before {
  bottom: -12px;
  left: 50%;
  border: solid transparent;
  content: "";
  position: absolute;
  pointer-events: none;
}

.tab-arrow:after {
  border-bottom-color: #fff;
  border-width: 7px;
  margin-left: -7px;
}

.tab-arrow:before {
  border-bottom-color: #818181;
  border-width: 8px;
  margin-left: -8px;
}
/*Arrow Tabs End*/
/**************************/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- Tabs -->
<div class="tab-container" ng-controller="appCtrl as ctrl">

  <div class="tab" ng-class="{selected: ctrl.selectedTab==='A'}" ng-click="ctrl.selectedTab = 'A'">
    <span class="tab-label">Tab-A</span>
    <div class="tab-arrow" ng-show="ctrl.selectedTab === 'A'"></div>
  </div>

  <div class="tab" ng-class="{selected: ctrl.selectedTab === 'B'}" ng-click="ctrl.selectedTab ='B'">
    <span class="tab-label">Tab-B</span>
    <div class="tab-arrow" ng-show="ctrl.selectedTab === 'B'"></div>
  </div>

  <div class="tab" ng-class="{selected: ctrl.selectedTab === 'C'}" ng-click="ctrl.selectedTab ='C'">
    <span class="tab-label">Tab-C</span>
    <div class="tab-arrow" ng-show="ctrl.selectedTab === 'C'"></div>
  </div>

</div>