Firefox在懸停，活動和焦點狀態中添加不需要的邊框

此錯誤的示例在http://codepen.io/thatgibbyguy/pen/dGYEjE。Firefox在懸停，活動和焦點狀態中添加不需要的邊框

我在所有的狀態，但默認狀態的Firefox的錯誤掙扎。我看過這兩個鏈接，但還沒有找到解決方案（Firefox outline around box-shadow on hover，CSS - Unwanted Border-Bottom）。

懸停/焦點/活動會發生什麼，firefox要麼是在按鈕底部周圍畫一個邊框，要麼是將box-shadow偏移一個像素並創建輪廓的外觀。

守則

<a class="lm-button lm-button--primary">Primary Button</a> 

.lm-button, .lm-button--primary, .lm-button--secondary { 
    display: inline-block; 
    padding: .7em 1.25em .4em; 
    font-family: arial; 
    line-height: 1em; 
    text-align: center; 
    border-radius: 8px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    cursor: pointer; 
    text-decoration: none; 
    position: relative; 
    transition: all 100ms ease-out, transform 75ms ease, background 300ms ease-out; 
} 
.lm-button:focus, .lm-button--primary:focus, .lm-button--secondary:focus, .lm-button:active, .lm-button--primary:active, .lm-button--secondary:active { 
    transform: translateY(0) scale(0.95); 
} 

.lm-button { 
    color: #fff; 
    background: #57554f; 
    border: 1px solid #57554f; 
    border-bottom: 0 none; 
    box-shadow: 0 0.2em 0 #2f2e2b; 
    margin-right: .5em; 
} 
.lm-button:hover { 
    color: #fff; 
    background: #64625b; 
    box-shadow: 0 0.25em 0.05em #2f2e2b; 
    transform: translateY(0) scale(1.025); 
} 
.lm-button:focus, .lm-button:active { 
    color: #fff; 
    border: 1px solid #57554f; 
    background: #4a4843; 
    border-bottom: 1px solid #4a4843; 
    box-shadow: 0 0.25em 0 #4a4843, 0 0.15em 0.15em #1c1c1a inset; 
}

我被這種行爲難倒並尋找解決方案。

來源

2015-12-14 thatgibbyguy

不過一直沒能解決的問題，但在正確的方向邁出的一步是刪除按鈕下方的箱陰影。 – thatgibbyguy

實際問題出在你的'transform'屬性中。它的規模（x，y），你有規模（1.025），將它改爲scaleX（1.025）;修復它。這是修訂後的筆。 http://codepen.io/anon/pen/vLNoRr –

差不多！它在底部邊界半徑仍然留下少量白色殘餘物。如果你點擊底部就會更容易看到。 – thatgibbyguy

我認爲這不是問題。這可能是基於瀏覽器的可訪問性

你可以試試：

selector::-moz-focus-inner { 
    border: 0 !important; 
} 

selector:focus, selector:hover, selector:active { 
    outline: 0 !important; 
}

來源

2015-12-14 18:25:02

不幸的是這並不能解決問題。感謝您的輸入！ – thatgibbyguy

恩裏克，如果你改變你的答案爲'outline：0！important'，我會將其標記爲已接受。 – thatgibbyguy

哦，這是正確的。對不起，誤導了。 FIXD。 –

Firefox在懸停，活動和焦點狀態中添加不需要的邊框

回答

相關問題