在Firefox中更改边框样式

我在Firefox中应用边框样式更改时遇到问题。我的代码：在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>

来源

2013-12-19 LJ Wadowski

你可以创建一个你的代码的小提琴 – man

看起来很好：http://jsfiddle.net/yRBCm/ – SW4

这里是它：http://jsfiddle.net/5fbyU/ –

不幸的是你不能这样做，因为它是一个开放的bug在Firefox：

Bug report

如果除去border-radius它将工作正确。

来源

2013-12-19 12:32:04 enyce12

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

你可以在this fiddle上看得更清楚。

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

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

其实这是因为你的圈子全是半径，当你说你的箱子有border-radius: 50%，你说每个角落都会占据50％的边界。然后显示边框没有剩余空间。那么发生什么事是边框样式属性不会影响空间的border-radius空间。

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

来源

2013-12-19 12:33:12

您可能想要包括为什么发生这种情况。 ...这是Firefox的一个bug – DaniP

是的，这是Firefox的一个bug，但是它的发生是有原因的，并且在上面已经描述过了。 –

在Firefox中更改边框样式

回答

相关问题