Bootstrap glyphicon hover只有部分顏色

我利用Bootstrap的glyphicon字體在菜單鏈接中呈現圖標。他們有一個CSS：懸停效果，導致他們在懸停時改變顏色。對於大多數圖形來說，這種方式非常完美，但由於某些原因，使用「打開文件夾」圖標時，圖標的右側部分爲而非在懸停時顏色正確 - 它仍然是默認的無遮蓋顏色。Bootstrap glyphicon hover只有部分顏色

它只發生在Mac上的Safari（似乎在Chrome上工作正常）。我附上了截圖。有什麼想法嗎？

Glyphicon hover partially colored issue on Mac Safari

來源

2014-01-17 Alex Coleman

調整字母間距似乎工作。

.glyphicon{ 
    letter-spacing:3px; 
}

http://jsfiddle.net/Ru8ME/8/

來源

2014-03-13 19:27:40 Alex

這是正確的：添加'letter-spacing'確實修復了它。但是對於最新的工作演示，請使用Lorenz提到的小提琴：http://jsfiddle.net/Ru8ME/12/ –

快速破解，你可以做的是添加填充。

.glyphicon-folder-open {padding-right: 10px;}

來源

2014-02-24 02:38:28

仍然無法在Mac上的Safari上運行7.0.2。 –

編輯：由Alex的建議，增加字母間距CSS屬性：

http://jsfiddle.net/Ru8ME/12/

從小提琴：

.glyphicon { 
    font-size: 40px; 
    color: #0C6; 
    letter-spacing:6px; 
} 
.glyphicon:hover { 
    color: #F00; 
}

我C確認這適用於OS X的Safari 7.0.2和Chrome 33！

來源

2014-02-24 04:37:21

Mac上的Safari 7.0.2中的小提琴中的這兩個迭代仍然不正確地呈現。 –

在Alex的幫助下添加字母間距...在PC上使用Chrome ...在Mac上進行測試？ jsfiddle.net/Ru8ME/8 – Phlume

Bootstrap glyphicon hover只有部分顏色

回答

相關問題