html - 跨浏览器(chrome/firefox)试图获得以像素百分比定义的顶级位置

Question

我在跨浏览器输出方面遇到问题，我正在尝试获取 div 的顶部和左侧 css 属性，但 firefox 为我提供了确切的像素位置，而 Chrome 为我提供了百分比。

例子: http://web.cinaird.se/pdf/test.htm

CSS

#mix{
    position:absolute;
    top: 10px;
    left: 45%;
    background-color:#f0f;
}

j查询

css top: $("#mix").css("top") + " <br/>css left: " + $("#mix").css("left")

输出

Firefox(和 IE8):CSS顶部:10pxCSS 左侧:267.3px

Chrome :CSS顶部:10pxCSS 剩余:45%

有什么方法可以让两种(所有)浏览器都获得相同的结果吗？我更愿意在没有任何主要计算的情况下获得像素值

Answer 1

使用position 或offset 方法，具体取决于您想要的位置是相对于偏移父级还是相对于文档。

例子:

var p = $("#mix").position();
alert('top: ' + p.top + 'px, left: ' + p.left + 'px');