jquery - 工具提示未在 Internet Explorer 中正确显示

Question

我在 Internet Explorer 6 和 7 中的工具提示似乎出现在下一个工具提示的“下方”。它可能与 toolTip 类的相对位置样式规则有关，但它是定位 toolTipWrapper 所必需的。下面是我的工具提示的 css 和 Jquery。我正在使用 span 标签并分配一个类 toolTip 并添加一个包含工具提示文本的 title 属性。

CSS:

.toolTip {
    padding-right: 20px;
    background: url(../images/pageElements/help.gif) no-repeat right;
    color: #660099;
    cursor: help;
    position: relative;
}

.toolTipWrapper {
    position: absolute; 
    width: 201px; 
    top: 15px; 
    right: 0px; 
    font-size: 1em; 
    font-weight:bold; 
    color: #fff; 
    display: none; 
    z-index:999!important; 
}  

.tipTop {
    height: 30px;  
    width: 201px; 
    background: url(../images/pageElements/tipTop.png) no-repeat top;
}  

.tipMid {
    background: url(../images/pageElements/tipMiddle.png) repeat-y; padding: 0 25px 0 25px;
}  

.tipBtm {
    background: url(../images/pageElements/tipBottom.png) no-repeat bottom; height: 8px;
}  

JavaScript:

$(function () {
    var zmax = zmax + 1; //increase the z-index by 1
    $(".toolTip").hover(
        function () {
            this.tip = this.title;
            $(this).css('z-index', zmax); //create inline css zindex add 1 layer
            $(this).append(
                '' + '' + '' + this.tip + '' + '' + ''
            );
            this.title = "";
            this.width = $(this).width();
            $(this).find(".toolTipWrapper").css({
                left: this.width - 22
            })
            $(".toolTipWrapper").fadeIn(300);
        },
        function () {
            $(".toolTipWrapper").fadeOut(100);
            $(this).children().remove();
            this.title = this.tip;
        }
    );
});

抱歉，并不是所有的 jQuery 代码都出现在代码括号之间。我尝试添加 jQuery 选项以将工具提示的 Z 索引增加 1，但这似乎不起作用。它不会抛出错误或任何东西，但什么也没有发生。

Answer 1

如果没有实际示例很难确定，所以我可以看到 DOM 结构，但根据我的经验，我发现 IE 和其他浏览器之间不同的 Z-index 问题是计算差异的结果“堆叠上下文”。 (其中“Stacking Context”是您想要搜索和了解的内容)。