部門沒有正確定位在FireFox

我有一個問題定位div。這裏是div：部門沒有正確定位在FireFox

<div class="facebookHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none"> 
<div class="calendar-hover-top"></div> 
<div class="calendar-hover-middle"> 
    <div class="post-image"></div> 
    <div class="facebook-icon">Facebook</div> 
    <div class="post-content"><span id="facebook-text">content</span> 
     <div class="post-date">This will be the date.</div> 
    </div> 
</div> 
<div class="calendar-hover-bottom"></div> 
</div> 

<div class="twitterHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none"> 
<div class="calendar-hover-top"></div> 
<div class="calendar-hover-middle"> 
    <div class="twitter-icon">Twitter</div> 
    <div class="post-content"><span id="twitter-text">content</span> 
     <div class="post-date">This will be the date.</div> 
    </div> 
</div> 
<div class="calendar-hover-bottom"></div> 
</div>

我使用jQuery的以下功能可以顯示工具提示：如果我在谷歌瀏覽器運行此

function ShowToolTip(event, postType, postMessage, scheduleDate, customPostId, postId) { 
     if (postType == 'Twitter') { 
      $('.twitterHoverDiv .post-content #twitter-text').text(postMessage); 
      $('.twitterHoverDiv .post-content .post-date').text(scheduleDate); 
      $('.twitterHoverDiv').css("left", event.x - 65); 
      $('.twitterHoverDiv').css("top", event.y - $('.twitterHoverDiv').height()); 


      $('.facebookHoverDiv').hide(); 
      $('.twitterHoverDiv').show(); 
     } else { 
      $('.facebookHoverDiv .post-content #facebook-text').text(postMessage); 
      var url = "http://host.mmm.dev.webedge.mcmurry.com/Media/Image.ashx?articleid=" + postId + "&custompostid=" + customPostId; 
      //url = url.replace("undefined", "0"); 
      $('.facebookHoverDiv .post-image').css("background-image", "url('" + url + "')"); 
      $('.facebookHoverDiv .post-image').css("background-size", "100%"); 
      $('.facebookHoverDiv .post-content .post-date').text(scheduleDate); 
      $('.facebookHoverDiv').css("left", event.x - 65); 
      $('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height()); 


      $('.twitterHoverDiv').hide(); 
      $('.facebookHoverDiv').show(); 
     } 
    }

，它完美的作品。但是，如果我在FireFox中運行它，工具提示將出現在屏幕的左上角。問題似乎在$('.facebookHoverDiv').css("left", event.x - 65);和$('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height());調用中。

我需要爲FireFox特定的東西嗎？

來源

2012-11-09 Icemanind

我想通了。以防萬一遇到這個問題。該問題是由於使用event.x和event.y屬性造成的。這些屬性存在於Chrome中，但在其他瀏覽器中，它們被稱爲event.clientX和event.clientY。更改屬性以解決我的問題。

來源

2012-11-09 22:40:15 Icemanind

在規範中，它們被稱爲'clientX'和'clientY'。見http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent –

設置一個單元

.css("left", (event.x - 65) + "px");

做同樣的事情與頂級

來源

2012-11-09 21:17:35 epascarello

不錯的建議，但是，與以前相同的問題。 – Icemanind

部門沒有正確定位在FireFox

回答

相關問題