Question

我在Firefox中应用边框样式更改时遇到问题。我的代码：

.wizardCircle{
    position: relative;
    background: #fff;
    display: inline-block;
    margin: auto;
    height: 45px;
    line-height: 40px;
    font-weight: bold;
    width: 45px;
    border: 3px solid;
    border-radius: 50%;
    text-align: center; 
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#wizardRow>div:hover .wizardCircle{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: dotted;
}

问题仅存在于FF中。我尝试使用border: 3px dotted insted border-style和!important，但这也无效。 CSS transform适用于所有浏览器。 HTML结构：

  <div id="wizardRow" class="row">
      <div class="col-xs-2 wizardCompleted">
          <a href="#"><span class="wizardCircle"><span class="glyphicon glyphicon-ok"></span></span></a>
          <a href="#"><span class="wizardDesc">Tekst</span></a>
      </div>
  </div>

Answer 1

你的border-radius使虚线边框消失。

您可以在this fiddle上看到更好。

#wizardRow>div:hover .wizardCircle{
    ...
    border-radius: 25%;
    ....
}

如果你输入一个小值，就可以看到发生的变化。

实际上这是因为你的圈子都是半径，当你说你的盒子会有border-radius: 50%时，你说每个角都占据了边界的50％。然后没有显示边框的剩余空间。所以发生的事情是 border-style 属性不会影响 border-radius 空间。

原因是Firefox呈现border-radius属性的方式存在错误。

Answer 2

不幸的是你无法做到这一点，因为它是Firefox中的一个漏洞：

Bug report

如果您移除border-radius，它将正常工作。

更改边框样式：Firefox中的悬停状态

2 个答案: