javascript - 获取图像相对于父级的位置，考虑垂直偏移

Question

我在 HTML 中有两个相邻的图像。一个图像比另一个高。图片有一个 vertical-align: middle CSS 属性。这会导致较短的图像相对于父容器的位置低于较高的图像。

我使用 jQuery .position() 方法来获取图像的位置。两张图片的 position.top 是相同的，显然较短的图片由于 vertical-align: middle CSS 属性而进一步向底部偏移。

考虑到由 vertical-align: middle CSS 属性引起的垂直差异，如何获得图像的实际位置？

更新:

出现问题是因为我做了以下操作:

1. 我的 HTML 输出图像没有 src 属性。他们是这样有宽度和高度，所以浏览器不需要等待在计算其位置之前加载实际图像(后面的步骤)
2. 我设置了每张图片的src属性
3. 我使用 jQuery 检查位置。我的猜测是浏览器(FF9.0.1) 等待加载图像，然后更新其位置并使其对 JS 可用

我需要重新设计我的应用程序，以免发生这种情况

Answer 1

试试这个。

http://jsfiddle.net/cadence96/X54gy/

small = parseInt($('img:eq(0)').css('height'));
big = parseInt($('img:eq(1)').css('height'));

difference = big - small;
top_distance = difference/2;

alert(top_distance);