在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中更改邊框樣式

回答

相關問題