Question

首先，我已经尝试了几个关于浏览器之间定位的SO解决方案，虽然答案可能在其中一个中，但对我来说并不明显，而且我根据提供的解决方案所做的尝试都失败了。

Display differences between Firefox and Chrome/IE

1 pixel difference between Firefox and Chrome

我正在尝试使用底部箭头创建一个标签控件，指示所选的标签。我的问题是firefox没有像IE和Chrome那样定位箭头。

我正在使用底部属性来定位箭头，我已经在SO上阅读了一些帖子，在这种情况下它建议不使用底部，而是利用margin-bottom。我尝试用保证金底部进行捣乱，但结果只是带来灾难性后果。

如何修复此CSS，以便Chrome，IE和Firefox之间的底部箭头保持一致？

（下面还添加了完整的代码段）
http://plnkr.co/edit/MlNz4a2cC00QGqaDEucc?p=preview

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

底部定位因Firefox和Chrome / IE而异

0 个答案: