需要在jquery-ui / webkit中解决.position()错误

时间:2011-12-04 20:14:05

标签: jquery css jquery-ui webkit

我有一个网页,最终是一堆jquery-ui对话框,全部为30%的屏幕宽度,分为三列,每列包含不同类型的仪表板信息。

我将数据加载到div中,并在$(document).ready()函数上创建对话框,并根据div显示的数据类型将它们排列在各个列的顶部。 。

我为每个div使用此代码的变体(我计划在使其正常工作时使其更清洁,所以请原谅其冗余)。首先,如果它包含数据,我创建对话框:

//show recent posts if they exist below the account requests
if($('#recentPosts').html().length > 0){
    $('#recentPosts')
    .dialog({
        title: 'Recent Forum Messages',
        height: 320
    })
    .parent().addClass('cfdialog').attr('id', 'recentPostsDialog');
} else {
    $('#recentPosts').addClass('cfdialog').attr('id', 'recentPostsDialog');
}

...这是必要的,因为我需要能够抓取整个对话框(我不明白为什么没有机制可以轻松地将ID分配给对话框div);创建完所有对话框后,我会这样做:

//now that the dialogs are set up, position them.
var leftContent = $('#columnTop');
var centerContent = $('#columnTop');
var rightContent = $('#columnTop');

$('.cfdialog')
.css('width', '30%')
.css('height', 'auto')
.css('max-height', '400');

...

$('#recentPostsDialog')
.position({
    my: 'center top',
    at: 'center bottom',
    of: centerContent,
    offset: '0 5'
});
if ($('#recentPostsDialog').html().length > 0){
    centerContent = $('#recentPostsDialog');
}

这将在FireFox和IE中按照我的喜好显示对话框中的帖子。但是,对于Chrome,对话框会弹出大约30个像素并干扰我的菜单项。

我已经在SO上阅读了很多内容,jquery论坛建议这是由于webkit计算偏移量的方式,并且有人发布了补丁修复,但在这种情况下它似乎不起作用。

有人能告诉我如何解决基于webkit的浏览器的问题吗?

1 个答案:

答案 0 :(得分:0)

似乎没有简单的答案。我最终测试了jQuery.browser.safari,如果是,则手动偏移div。 :(