2010-09-27 170 views
0

下面是一些代碼,我使用的工具提示懸停在其元素上方,所以它不會彈出如下,並強制用戶滾動查看它。它在除IE以外的所有瀏覽器中都能正常工作。在IE中,它位於元素下面而不是上面。IE位置問題的工具提示

我該如何修復IE的定位錯誤?我難倒了。

<style type="text/css"> 
.ToolTip 
{ 
    border: 2px solid black; 
    background:#fff; 
    display:none; 
    padding:10px; 
    width: 325px; 

    z-index:1000; 
    -moz-border-radius:4px; 
} 
</style> 

    <script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 


    $(".tip_holder").hover(
       function() { 
        var $containerWidth = $(this).width(); 
        var $offset = $(this).offset(); 

        $('#ToolTipPopUp') 
         .prepend('<div id="tooltip" class="ToolTip">' + $("#ToolTipHolder").text() + '</div>'); 

        var $tipWidth = $('#tooltip').width(); 
        var $tipHeight = $('#tooltip').height(); 

        $('#tooltip').css({ 
         'top': $offset.top - ($tipHeight + 15), 
         'left': $offset.left - ($tipWidth - $containerWidth)/2, 
         'position': 'absolute', 
         'display': 'block' 
        }); 

       }, 
       function() { 
        $('#tooltip').remove(); 
       } 
      ); 

     }); 

    </script> 


<img src="/Content/Images/WhatsThis.png" class="tip_holder" /> 
        <div> 
         <div id="ToolTipPopUp"></div>  
         <span id="ToolTipHolder" style="display:none;">For Visa, MasterCard 
          and Discover, the card verification number is a 3-digit security code that is printed 
          on the back of your card. 
          <br /> 
          <br /> 
          For American Express, the card verification number is 4-digits and appears on the 
          front of the card. The number appears on the signature strip after the last four 
          digits of your account number. 
         </span> 
        </div> 
+0

看起來像JS文件CurvyConrers導致一些IE問題。將報告我發現的內容。 – Todd 2010-09-27 19:11:37

回答

2

IE會令你瘋狂。如果你不介意使用javascript來解決這個問題,你可以使用http://rafael.adm.br/css_browser_selector/或者你可以使用條件語句來爲IE使用不同的樣式表,如下所示:<!--[if IE 8]> link your stylesheet here <![endif]-->你可以使用幾個不同版本的if語句,只需google「IE if聲明」。

+1

我使用瀏覽器選擇器,太棒了! +1 – Kyle 2010-09-28 07:40:24