Bootstrap 3中的工具提示在Firefox中有不需要的CSS效果

請查看我的活動網站http://mozzor.com，並將鼠標懸停在頂部的圓圈圖標上。請注意（我使用FF23）只發生在Firefox兩種效應：Bootstrap 3中的工具提示在Firefox中有不需要的CSS效果

1）是添加到工具提示

2的文本藍色的下劃線）文字呈現在盤旋，然後過了片刻，似乎模糊了自己。

我在用Firebug調試時遇到了問題......我無法找到與這些效果對應的css元素。

以防萬一，這裏是我如何樣式的工具提示一些相關代碼：

// Variable currentSelect corresponds to hex color value 
// selected in the jQuery widget seen at the top left side of the page 
$('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function() { 
    var tooltip = $(this).next(".tooltip"); 
    //Box 
    tooltip.find(".tooltip-inner").css({ 
     backgroundColor: "#fff", 
     color: currentSelect, 
     borderColor: currentSelect, 
     borderWidth: "1px", 
     borderStyle: "solid" 
    }); 
    //Arrow 
    tooltip.find(".tooltip-arrow").css({ 
     //borderTopColor: currentSelect, 
     //borderLeftColor: currentSelect, 
     //borderRightColor: currentSelect, 
     borderBottomColor: currentSelect 
    }); 
});

編輯：第二個問題似乎處理的字體在Firefox慢慢走樣。嘗試幾種不同的字體後問題仍然存在。欲瞭解更多信息，請參見下面：

Github的問題：https://github.com/twbs/bootstrap/issues/10218

的Bugzilla問題：https://bugzilla.mozilla.org/show_bug.cgi?id=909814

來源

2013-08-27 JLewkovich

你的第一個問題是下劃線，這是由CSS text-decoration屬性來決定。我不完全確定它爲什麼會發生在Firefox上（Chrome瀏覽器看起來是正確的，因爲菜單項的文本修飾被設置爲無）。這是一個快速解決方案，但我會看看我能否找到原因。

#iconrow a { 
    text-decoration: none; 
}

關於第二個問題：我不明白你爲什麼不能用CSS做到這一點。

來源

2013-08-27 05:32:16 FakeRainBrigand

我試圖阻止使用CSS（或其他方式）的效果，但我不知道如何阻止它 – JLewkovich

自從您發佈此消息之後，您是否在頁面上更改過任何內容？我不再看到藍色的效果。現在我想到了，它可能是一個文字陰影。嘗試使用'* {text-shadow：none}'來查看是否爲您修復了這個問題，然後如果它能夠工作，就可以縮小它的範圍。 – FakeRainBrigand

確定你的解決方案的下劃線工作，但我仍然得到模糊效果和'* {text-shadow：none}'沒有修復。我想知道是Bootstrap還是Firefox的問題... – JLewkovich

Bootstrap 3中的工具提示在Firefox中有不需要的CSS效果

回答

相關問題