Подсказка в Bootstrap 3 имеет нежелательные CSS-эффекты в Firefox

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.