一尘不染

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

css

我在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上可以正常工作


阅读 203

收藏
2020-05-16

共1个答案

一尘不染

正确答案是对我在bugzilla上提交的错误的评论

为了获得正确的%值(也在firefox上),display应将元素(或其父元素之一)设置为none

不清楚的是:为什么在相同的浏览器/版本上(请参阅XP / win7上的firefox 7或mac osx / ubuntu上的Opera
11.5)却在不同的操作系统上,行为不同?

顺便说一句,@ thg435发布的规范(并在mdn上进行了报道)仍在不断变化。

2020-05-16