jQuery的.position与css3的转换冲突

Question

我有一个关于jQuery .position函数的问题。

它与CSS3的变换旋转相冲突。

我在旋转的div中得到图像的左右位置。

如果我旋转了我的DIV，那么.position的结果与不旋转div的结果不同。

下面是div的CSS：

#a{
    position:relative;
    float:left;
    margin-top:100px;
    margin-left:100px;
    -webkit-transform:rotate(30deg);
    width:300px;
    height:300px;
    background-color:#CCC;
}

下面是jQuery代码：

$("#img").click(function(){
    alert($(this).position().left);
    alert($(this).position().top);
})

Answer 1

似乎.offset()和.position()在不同的浏览器中给出了不同的输出，下面是一个测试：http://jsfiddle.net/F8Jtt/5/

这里有一个类似的问题，并有一个公认的答案：jQuery .position() strangeness while using CSS3 rotate attribute

Answer 2

是jQuery的缺陷：http://bugs.jquery.com/ticket/8362和http://bugs.jqueryui.com/ticket/6844 jQuery将offsetParent()与while of位置一起使用，但不使用计算旋转和缩放父级。jQuery不支持CSS3。