我在定位 div
时遇到问题。这是 div
:
<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();
}
}
如果我在 Google Chrome 中运行它,它会完美运行。但是,如果我在 FireFox 中运行它,工具提示会显示在屏幕的左上角。问题似乎出在 $('.facebookHoverDiv').css("left", event.x - 65);
和 $('.facebookHoverDiv').css( “顶部”,event.y - $('.facebookHoverDiv').height());
调用。
我需要为 FireFox 做一些特定的事情吗?
最佳答案
我想通了。以防万一其他人遇到这个问题。该问题是由使用 event.x
和 event.y
属性引起的。这些属性存在于 Chrome 中,但在其他浏览器中它们被称为 event.clientX
和 event.clientY
。将属性更改为此解决了我的问题。
关于jquery - Div 未在 FireFox 中正确定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13316037/