部门没有正确定位在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

回答

相关问题