使用jQuery左侧偏移内联元素

我有以下HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

使用CSS将DIV的宽度固定为600px。 现在,我想找到元素的offset()。left。 所以我做了:

 alert( $("#s").offset().left ); 

然而,这似乎没有产生正确的值,因为我可以清楚地看到强大的元素在600px宽度的中途被看到,但是我获得的偏移值仅为8px。

如何找到内联强元素的offset()。left值?

这是发生了什么:

图

由于内联元素跨越多行,jQuery将为您提供该元素的最左侧位置,而不是元素开头的偏移量。

要解决此问题,请尝试以下插件:

 jQuery.fn.inlineOffset = function() { var el = $('').css('display','inline').insertBefore(this[0]); var pos = el.offset(); el.remove(); return pos; }; 

该插件将创建一个临时元素并将其插入目标元素之前 – 然后它将返回该临时元素的偏移量。

用法示例:

 alert( jQuery('strong').inlineOffset().left ); 

你得到8px结果的原因是因为即使元素从容器的一半开始,因为有一个换行符,它的左边缘是从页面开始的8px。

我有一种感觉,这可能是一个比这更好的方法,但我能想到解决这个问题的第一件事就是在之前插入另一个元素并检查它的位置:

 $("").insertBefore($('#s')).offset(); 

我相信偏移是相对于文档,而位置是相对于父。

http://docs.jquery.com/CSS/position