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选项以将toolTip的Z-index增加1，但这似乎不起作用。这不是抛出错误或任何事情，但没有任何反应。

Answer 1

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

工具提示在Internet Explorer中无法正常显示

1 个答案: