Question

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

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

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

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

导致它向下移动的原因是什么？删除span元素可以解决问题，这表明它是由span元素的内联属性引起的。不幸的是，我确实需要整个内容包含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;
}

Answer 1

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

当你把它们翻到“position：absolute”时，那些东西的含义就会改变。

如果你开始使用CSS规则给出跨度“display：inline-block”，那么行为就会改变（尽管它仍然有些奇怪）。（编辑 - 啊，它是正在进行水平移动的“text-align：center”。一旦第一个元素被拉出线，另一个必须重新居中。）

请注意，添加跨度时，给它们一个高度无效;它们是内联元素，而不是块。

编辑 - 我已经考虑过如何做到这一点，但这有点棘手，因为不清楚你想要什么效果。问题是内联内容的布局规则会影响图像并导致奇怪的行为。例如，“text-align：center”会在您“固定”图像后立即移动。因此，对于“内联块”，当您移动元素时，它将冻结到位，但另一个图像将被调整为遵循该“文本对齐”规则，从而与固定元素重叠。

jQuery偏移量返回<span>或内联<div> </div> </span>的无效值

1 个答案: