jQuery偏移量返回或内联的无效值
我已经创建了一个测试用例，请查看它，因为它说明了我的问题： http ： //jsfiddle.net/jAD2W/6/ （感谢@patrick dw减少示例）
为了完整起见，此代码也已添加到本文的底部。
基本上，每当我得到span元素或inline div元素的偏移量时， top值都应该大于它应该的值。
当您将鼠标hover在示例中的图像上时，它应该保持在该绝对位置。 不幸的是，它似乎被降低了。
是什么导致它向下移动？ 删除span元素可以解决问题，这表明它是由span元素的内联属性引起的。 不幸的是，我确实需要整个内容包含span或内联div元素。
来自jsFiddle（html，javascript，css）的代码：
$('#containerElement1').mouseenter(function(e) { var offset = $(this).offset(); $(this).css({ 'position': 'absolute', 'top': offset.top, 'left': offset.left }); }); img { width:250px; height:150px; } span { width:250px; height:150px; }
我认为问题是，只要你给元素“position：absolute”，你就会改变一些关于布局的东西。 对于初学者来说， 元素只是“position：static”和“display：inline”。 因为它们是内联的，所以“顶部”值看起来很大，因为它们设置在容器底部的文本基线上。 换句话说，容器
在它们周围伸展，顶部是文本行的顶部（在您的示例中不存在，但这是浏览器的想法）。
当你把它们翻到“position：absolute”时，那些东西的意义就会改变。
如果你开始使用CSS规则给出跨度“display：inline-block”，那么行为就会改变（尽管它仍然有些奇怪）。 （ 编辑 – 啊，它是正在进行水平移动的“text-align：center”。一旦第一个元素被拉出线，另一个元素必须重新居中。）
请注意，添加跨度时，给它们一个高度没有效果; 它们是内联元素，而不是块。
编辑 – 我已经考虑过如何做到这一点，但这有点棘手，因为不清楚你想要什么效果。 问题是内联内容的布局规则会影响图像并导致奇怪的行为。 例如，“text-align：center”会在您“固定”图像后立即移动。 因此，对于“内联块”，当您移动元素时，它将冻结到位，但是另一个图像将被调整为遵循该“文本对齐”规则，从而与固定的规则重叠。