jQuery偏移返回< span>的无效值或内联< div> [英] jQuery offset returns invalid value for <span> or inline <div>
问题描述
我已经创建了一个测试用例，请查看它，因为它说明了我的问题： http：// jsfiddle .net / jAD2W / 6 / （感谢@patrick dw减少示例）
I've created a test case, please check it out as it illustrates my issue: http://jsfiddle.net/jAD2W/6/ (reduced example thanks to @patrick dw)
为了完整性，此代码也已添加到底部这篇文章。
基本上，每当我得到span元素或内联div元素的偏移量时， top 值大于它应该是。
Basically, whenever I get the offset of a span element or inline div element, the top value is larger than it should be.
当你在示例中鼠标悬停图像时，它应该保持在绝对位置。不幸的是，它似乎被推倒了。
When you mouse-over the image in the example, it should stay at that absolute position. Unfortunately, it appears to be moved down.
是什么导致它向下移动？删除span元素可以解决问题，这表明它是由span元素的内联属性引起的。不幸的是，我确实需要整个内容包含span或内联div元素。
What is causing it to move down? Removing the span element solves the problem, which indicates that it is caused by the inline property of the span element. Unfortunately, I do need the entire thing to be contained by a span or an inline div element.
来自jsFiddle的代码（html，javascript，css）：
The code from 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;
}
推荐答案
我认为问题在于一旦你给元素position：absolute，你就会改变一些关于布局的东西。对于初学者来说，< span> 元素只是position：static和display：inline。因为它们是内联的，所以顶部值看起来很大，因为它们设置在容器底部的文本基线上。容器< div> 在它们周围伸展，换句话说，顶部是文本行的顶部（在您的示例中不存在，但这就是浏览器认为）。
I think the problem is that as soon as you give the elements "position: absolute", you change a bunch of stuff about the layout. For starters, the <span> elements are just "position: static" and "display: inline". Because they're inline, the "top" value looks big because they're set on a text baseline that's at the bottom of their container. The container <div> is stretched around them, in other words, and the top is the top of the row of text (non-existent in your example, but that's what the browser thinks).
当你将它们翻转到position：absolute时，这些东西的含义会发生变化。
When you flip them to "position: absolute", the meaning of those things changes.
如果你开始使用CSS规则给出跨度display：inline-block，那么行为就会改变（尽管它仍然有些奇怪）。 （编辑—啊，它是正在进行水平移动的text-align：center。一旦第一个元素被拉出线，另一个必须重新居中。）
If you start things off with a CSS rule that gives the spans "display: inline-block", then the behavior changes (though it's still somewhat weird). (edit — ah, it's the "text-align: center" that's doing the horizontal movement. Once the first element is yanked out of the line, the other has to re-center itself.)
请注意，添加跨度时，给它们一个高度没有效果;它们是内联元素，而不是块。
Note that when you add the spans, giving them a height has no effect; they're inline elements, not blocks.
编辑—我已经考虑过如何做到这一点，但这有点棘手，因为不清楚你想要什么效果。问题是内联内容的布局规则会影响图像并导致奇怪的行为。例如，text-align：center会在您固定图像后立即移动。因此，对于内联块，当您移动元素时，它将冻结到位，但另一个图像将被调整为遵循该文本对齐规则，从而与固定元素重叠。
edit — I've thought about how to do this, but it's a little tricky because it's not clear what effect you want. The problem is that the rules of layout for the inline content will affect the images and cause odd behavior. That "text-align: center", for example, will move things around as soon as you "pin" an image. Thus, with "inline-block", when you move over an element it will freeze in place, but the other image will then be adjusted to obey that "text-align" rule, and thus overlap the pinned one.
这篇关于jQuery偏移返回< span>的无效值或内联< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
