检索百分比CSS值(在firefox中)

Question

我在firefox上检索确切的css属性值(在'%'中)时遇到问题.

假设我们有这个非常简单的标记:

<div id="box">box</div>

这个css:

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

而我想找回左侧位置被JS(在"%")

使用mootools很简单(演示 - > http://jsfiddle.net/steweb/AWdzB/):

var left = $('box').getStyle('left');

或jQuery(演示 - > http://jsfiddle.net/steweb/RaVyU/):

var left = $('#box').css('left');

或者通过普通的js(演示 - > http://jsfiddle.net/steweb/tUAKA/):

function getStyle(el,styleProp){ //from ppk's quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');

但是如果你在firefox(8.0.1)上尝试它,你会发现结果不正确(应该是10%,但它是91px).问题是:这个较新版本的Firefox有没有错误？有谁知道这是一个已知的错误？难道我做错了什么？

谢谢 :)

更新:我也尝试过较旧的firefox版本,并且它不正确(它总是返回px值)..为了完整性,它在IE上正常工作

Answer 1

这是记录:

在执行所有计算之后,任何CSS属性的使用值都是该属性的最终值.可以通过调用window.getComputedStyle来检索使用的值.尺寸(例如宽度,线高)都以像素为单位等

似乎无法访问给定元素的"指定"css值,除非您确切知道应用哪个css规则并使用document.stylesheets或类似接口解析此规则.

Answer 2

正确答案是我在 bugzilla 上提交的 bug 的评论

https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7

要获得正确的 % 值（在 Firefox 上也是如此），元素（或其父元素之一）display应设置为none

测试： http: //jsfiddle.net/4RKsM/

不清楚的是：为什么在相同的浏览器/版本上（参见 XP/win7 上的 firefox 7 或 mac osx / ubuntu 上的 Opera 11.5）但在不同的操作系统上，行为不同？

顺便说一句，@thg435 发布（并在 mdn 上报告）的规范仍在不断变化。