CSS重叠直到第一次点击

时间:2013-11-20 23:25:13

标签: html css angularjs

我正在开发一个Web应用程序前端,我遇到了这个问题。我第一次加载页面时,我有https://duaw26jehqd4r.cloudfront.net/items/1Q1l2J0s1u3g3704301f/Screen%20Shot%202013-11-20%20at%208.10.35%20PM.png?v=970d0170

点击它后,样式看起来很正常https://duaw26jehqd4r.cloudfront.net/items/0C2A3M1M1D313W390o2K/Screen%20Shot%202013-11-20%20at%208.10.52%20PM.png?v=d0ff9ccd

此应用程序使用angular.js

这是代码

<div class="dropdown changeOutput pull-left">
  <a class="dropdown-toggle btn" data-toggle="dropdown">{{aqQuery.selectedUnit.label | metricName}} <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li ng-repeat="unit in aqQuery.availableUnits">
        <a ng-class="{active: aqQuery.selectedUnit.unit == unit.unit}" 
            ng-click="select(unit)">{{unit.label}}</a>
    </li>
  </ul>
</div>

这就是CSS

.changeOutput > a,
.report-btn > a,
.calendar-btn > a {
  background: none;
  border: none;
  box-shadow: none;
  color: #333;
  font-weight: bold;
  margin-top: 4px;
  padding: 6px;
  text-shadow: none;
  text-transform: uppercase;
  font-size: 13px;
}

.changeOutput > a .caret,
.report-btn > a .caret{
  margin: 6px 0 0 2px;
}

.changeOutput li a.active {
  color: #0088cc;
}

.changeOutput li a.active:hover {
  color: #ffffff;
}

.changeOutput .monitor-ico {
  background-position: -160px -1px;
}

.changeOutput .monitor-ico.active,
.changeOutput .monitor-ico:active {
  background: none;
  background-image: url(monitor-sprite.png);
  background-position: -160px -30px;
}

.changeOutput .monitor-ico:first-child {
  background-position: -73px -1px;
  margin-right: 5px;
}  

.changeOutput .monitor-ico:first-child.active,
.changeOutput .monitor-ico:first-child:active {
  background-position: -73px -30px;
}

0 个答案:

没有答案