2

我在某些浏览器中定位元素时遇到问题。我正在使用此处找到的 jQuery 自动完成功能。包含自动完成值的 div 应直接位于文本框下方，并且完美对齐。代码通过使用生成的 left 属性设置 div 的 css left 属性$(textbox).offset();

在解压缩代码以尝试解决我的问题后，我得到了这个：

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：请参阅此相关问题。jQuery UI 自动完成中断，因为它使用偏移量。有人有工作吗？

这是来自 UI 自动完成功能的 javascript 错误：

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

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

4

2 回答 2

2

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

body {
    width: 900px;
}

一旦我将其更改为width: 100%;并将整个页面包含在宽度为 900px 的 div 中，它就可以按预期工作。

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

我希望这个答案能拯救别人我浪费在这上面的所有时间......

于 2010-03-17T14:18:01.277 回答
1

我遇到了一个类似的问题，最后发现float属性影响relative，使得relativediv 在 Internet Explorer 8 中不稳定，但在 Firefox 中表现良好。

于 2011-08-08T04:50:01.757 回答