Question

我在某些浏览器中定位元素时遇到问题。我正在使用找到here的jQuery自动填充功能。包含自动完成值的div应该直接在文本框下面，并且完美排列。该代码使用$(textbox).offset();

生成的left属性设置div的css left属性

在解压缩代码以尝试修复我的问题之后，我明白了：

var a = $(textbox).offset();
element.css({
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
    top: a.top + textbox.offsetHeight,
    left: a.left
}).show();

这似乎应该可行，并且它在Firefox中有效。它在IE8，Chrome中无效。顶部位置总是正确的，但有时div太远到左边，或者太远到右边。

在不同的计算机上（全部使用Windows XP），它可以在IE8中运行......这怎么可能？我也在Mac，OS 10.5上测试过它。它适用于Firefox，但不适用于Safari。

我已经禁用了插件，更改了屏幕分辨率，重新调整了窗口大小...有时在某些地方不一致。

有人能想到我错过的东西吗？

更新：我重新编写了我的代码，以使用jQuery 1.4.2和jQuery UI 1.8rc3提供的自动完成功能。它仍然破碎，同样的问题。请帮忙！

更新2 ：见this related question。 jQuery UI自动完成中断因为它使用了偏移量。有没有人有解决方法？

以下是来自UI自动完成功能的javascript：

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })

如果更改为top: '0px', left: '0px'它可以正常工作，但显然位于错误的位置。

Answer 1

我终于弄清楚发生了什么。我有一个定义身体宽度的css规则：

body {
    width: 900px;
}

一旦我将其更改为width: 100%;并将整个页面封装在宽度为900像素的div中，它就会按预期工作。

看起来IE使用body元素来测量offset()的顶部和左侧值，但在绝对定位项目时使用窗口边缘来测量顶部和左侧距离。

我希望这个答案会在我浪费的时候拯救别人......

Answer 2

我遇到了类似的问题，最终发现float属性会影响relative，使得relative div在Internet Explorer 8中不稳定，但在firefox中运行良好。

在某些计算机上，jQuery offset（）在某些浏览器中不起作用

2 个答案: