Question

请查看我的实际网站http://mozzor.com并将鼠标悬停在顶部的圆圈图标上。请注意仅在Firefox中出现的两种效果（我正在使用FF23）：

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

Answer 1

你的第一个问题是下划线，它由CSS text-decoration属性决定。我不确定为什么它会在Firefox上发生（Chrome似乎正确，因为菜单项的文本修饰设置为无）。这是一个快速修复，但我会看看能否找到原因。

#iconrow a {
    text-decoration: none;
}

关于第二个问题：我不明白为什么你不能用CSS做到这一点。

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

1 个答案: