工具提示在Internet Explorer中显示不正确

Internet Explorer 6和7中的我的工具提示似乎出现在“下一个工具提示下”。它可能与toolTip类的相对位置样式规则有关，但它需要定位toolTipWrapper。下面是我的CSS和JQuery的工具提示。我正在使用span标记并指定类toolTip并添加包含工具提示文本的标题属性。工具提示在Internet Explorer中显示不正确

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：不jQuery代码的

$(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选项中添加一个工具提示的Z-index，但这似乎不起作用。它不会抛出错误或任何东西，但没有任何反应。

来源

2011-04-01 Gerry Bunker

很难确切地知道没有一个活的例子，所以我可以看到DOM结构，但根据我的经验，我发现Z-index在IE和其他浏览器之间存在差异的问题是由于计算“堆叠上下文”。（其中“堆叠上下文”是你想要谷歌和学习的东西）。

来源

2011-04-07 13:41:04 SimplGy

工具提示在Internet Explorer中显示不正确

回答

相关问题