jQuery offset() 在某些浏览器和某些计算机上不起作用

发布于 2024-08-24 14:25:33 字数 1322 浏览 5 评论 0原文

我在某些浏览器中定位元素时遇到问题。我正在使用此处找到的 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：请参阅此相关问题。 jQuery UI 自动完成功能中断，因为它使用了偏移量。有人有办法解决吗？

下面是 UI 自动完成功能中的 javascript，它会出错：

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

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

原文

I have a problem positioning an element in certain browsers. I'm using the jQuery autocomplete found here. The div containing autocomplete values should be directly under the text box, and line up perfectly. The code sets the css left property of the div by using the left property generated by $(textbox).offset();

After un-packing the code to try and fix my problem, I get this:

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();

This seems like it should work, and it does work in Firefox. It doesn't work in IE8, Chrome. The top position is always correct, but the sometimes the div is too far to the left, or too far to the right.

On different computers (all with Windows XP), it works in IE8... how can this be? I've also tested it on my Mac, OS 10.5. It works in Firefox, but not Safari.

I've disabled plug-ins, changed screen resolutions, re-sized windows... It just inconsistently works in some places sometimes.

Can anyone think of something I'm missing?

UPDATE:
I have re-worked my code to use the autocomplete supplied with jQuery 1.4.2 and jQuery UI 1.8rc3. It is still broken, same problem. Please help!

UPDATE 2:
See this related question. jQuery UI autocomplete breaks because it uses offset. Does anyone have a work around?

Here is the javascript from the UI autocomplete function that trips up:

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

If it is changed to top: '0px', left: '0px' it works fine, but is obviously positioned in the wrong spot.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

翻身的咸鱼 2024-08-31 14:25:33

我终于明白发生了什么事。我有一个定义正文宽度的 css 规则：

body {
    width: 900px;
}

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

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

我希望这个答案能够拯救其他人我在这方面浪费的所有时间......

I finally figured out what was happening. I had a css rule defining the width of the body:

body {
    width: 900px;
}

Once I changed this to width: 100%; and enclosed the entire page in a div of width 900px, it worked as expected.

It looks like IE uses the body element to measure top and left values for offset(), but uses the window edge when to measure top and left distances when positioning an item absolutely.

I hope this answer will save someone else all the time I've wasted on this...

回复收藏 0 原文