jquery - 如何让箭头出现在 IE 8 的 jQuery UI 1.10.2 Tooltips 小部件上？

Question

我正在使用 jQuery 1.9.1 和 Jquery UI 1.10.2 以及 jQuery UI 站点http://jqueryui.com/tooltip/#custom-style上显示的演示代码。自定义样式的演示在 FireFox 下显示了向下的箭头。在 IE 8 中，相同的演示显示了一个没有箭头的矩形。Tipsy 插件在 IE 8 下可以正常工作并正确呈现箭头。有没有人在 IE 8 下成功使用 jQuery UI 工具提示（和箭头）？我不包括代码，因为它位于上面显示的 jqueryui.com 链接上。请注意，jsfiddle 也不适用于 IE 8。我猜这可能就像 .css 修复一样简单。

Answer 1

我设法通过使用 CSS 中的 jQuery UI 图标 png 文件使箭头工作。一路上我也学到了一点。ui-icons_ 后面的代码是颜色代码。我向工具提示小部件添加箭头的方法依赖于框和箭头图标之间的颜色匹配，这限制了您的选项（缺少编辑/创建 png 文件）。示例代码显示工具提示框底部的箭头并使用 jQuery UI Start 主题。

CSS：

.ui-tooltip {
    border:0px;
    padding: 10px 10px;
    color: white;
    font:  10px "Helvetica Neue", Sans-Serif bold;
    background: #f7a50d;
}
.arrow {
    width: 16px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -10px;
    background-image: url(../jQuery/Styles/start/images/ui-icons_f7a50d_256x240.png); 
    background-position: -64px -16px;
}

jQuery：

    jQuery(document).tooltip({
    position: {
        my: "center bottom-5",
        at: "center top",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
            .addClass("arrow")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
        }
    }
});