jQuery offset（）在一些浏览器，在一些计算机上不工作 [英] jQuery offset() not working in some browsers, on some computers

问题描述

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

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

这似乎应该工作，它在Firefox中工作。它不工作在IE8，Chrome。

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.

在不同的电脑上（所有的Windows XP操作系统都是这样） ，它工作在IE8 ...这怎么可能？我也测试了它在我的Mac，OS 10.5。

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 ：
我重新使用我的代码来使用jQuery 1.4.2和 jQuery UI 提供的自动完成功能1.8rc3。它仍然是破碎，同样的问题。请帮助！

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!

更新2 ：
请参阅这个相关问题。 jQuery UI自动完成中断，因为它使用偏移。

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

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

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

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

如果更改为 top：'0px'，left：'0px'

推荐答案

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

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

body {
    width: 900px;
}

一旦我改变为 width：100％ 并将整个页面包含在宽度为900像素的div中，它可以正常工作。

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

看起来像IE使用body元素来测量top并保留 offset（）的值，但在定位项目时使用窗口边缘来测量顶部和左侧距离。

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...

这篇关于jQuery offset（）在一些浏览器，在一些计算机上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！