工具提示在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中顯示不正確

回答

相關問題