jQuery 偏移量为 <span> 或内联 <div> 返回无效值答案

【问题标题】：jQuery offset returns invalid value for <span> or inline <div>jQuery 偏移量为 <span> 或内联 <div> 返回无效值
【发布时间】：2011-07-05 13:41:30
【问题描述】：

我已经创建了一个测试用例，请查看它，因为它说明了我的问题：http://jsfiddle.net/jAD2W/6/（感谢@patrick dw 简化了示例）

为了完整起见，此代码也已添加到本文底部。

基本上，每当我获得 span 元素或内联 div 元素的偏移量时，top 的值都会大于应有的值。

当您将鼠标悬停在示例中的图像上时，它应该保持在该绝对位置。不幸的是，它似乎被下移了。

是什么导致它向下移动？去掉span元素就解决了，说明是span元素的inline属性引起的。不幸的是，我确实需要将整个内容包含在 span 或内联 div 元素中。

来自 jsFiddle 的代码（html、javascript、css）：

<html>
<body>
    <div id='showArea'>
        <span id="containerElement1">
             <img src='http://twitpic.com/show/thumb/5lkmac.jpg' >
        </span>
    </div>
</body>
</html>


$('#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;
}

【问题讨论】：

请将相关代码放入您的问题中。 StackOverflow 旨在成为一个独立的问题和答案存储库。您的问题可能会对未来的读者有所帮助，但如果 jsFiddle 已关闭或您的 fiddle 不再存在，则无法引用原始问题。
@patrick dw，点了，我添加了来源。
@tom 可能是因为当你给它一个 left 和 top 时，这就是绝对位置的作用？
@tom，如果我将鼠标悬停在第一个元素上，它就会消失。你希望在 mouseenter 上发生什么？
感谢@patrick dw，现在链接到您改进的进一步简化版本（也不需要锚）@Nicola Peluchetti，预期行为是图像保持在完全相同的位置（而其他图像确实会移动，因为该图像在其前面不再是静态的）。

标签： javascript jquery css-position

【解决方案1】：

我认为问题在于，一旦你给元素“位置：绝对”，你就会改变一堆关于布局的东西。对于初学者，<span> 元素只是“位置：静态”和“显示：内联”。因为它们是内联的，所以“顶部”值看起来很大，因为它们设置在位于容器底部的文本基线上。容器<div> 围绕它们展开，换句话说，顶部是文本行的顶部（在您的示例中不存在，但这是浏览器的想法）。

当你将它们翻转到“位置：绝对”时，这些东西的含义就会改变。

如果你从一个给跨度“显示：内联块”的 CSS 规则开始，那么行为就会改变（尽管它仍然有点奇怪）。（edit - 啊，是“text-align: center”在做水平移动。一旦第一个元素被拉出线，另一个元素必须重新居中。）

请注意，当您添加跨度时，给它们一个高度是没有效果的；它们是内联元素，而不是块。

edit — 我已经想过如何做到这一点，但这有点棘手，因为不清楚你想要什么效果。问题是内联内容的布局规则会影响图像并导致奇怪的行为。例如，“文本对齐：中心”会在您“固定”图像后立即移动。因此，使用“inline-block”时，当您移过一个元素时，它会冻结在原地，但随后会调整另一张图片以遵守“文本对齐”规则，从而与固定的图片重叠。

【讨论】：

我意识到绝对元素和静态元素之间存在差异。但是，即使是静态的，offset() 的目的不是返回元素的绝对位置吗？按照这个逻辑，在改变元素的绝对定位后将该位置设置为元素，应该使其保持在完全相同的位置。我错了吗？
它正在返回元素的绝对位置。问题是您知道这意味着什么与浏览器不同。 “内联”元素没有有意义的高度，因此它们的位置在其包含的块级元素中沿着文本基线。
我明白你在说什么。最有意义的解决方案是将新绝对跨度的位置设置为图像的偏移位置吗？像这样：jsfiddle.net/jAD2W/7 - 或者不建议将跨度设为绝对值并设置它的高度？编辑：更好的解决方案似乎是将 div 设置为display: inline-block;，就像你建议的那样。
我会更新我的答案，这样 Stackoverflow 就不会抱怨评论线程变长了。
谢谢。重叠是我预期的行为。听起来我希望内联表现得像内联块。很遗憾inline-block 没有在 IE6 中实现，在 IE7 中只是部分实现，但我相信这是解决这个问题的正确方法。