CSS値の取得（firefox）

Question

Firefoxで正確なCSSプロパティ値（ '％'）を取得できませんでした。私はJSで（ '％' で）左の位置を取得したいと思います

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

と：

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

と、このCSS：

たちは、この非常に簡単なマークアップを持っていると仮定します

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にはバグがありますか？誰かがそれが既知のバグかどうか知っていますか？私は何か間違っているのですか？

感謝:)

更新は..完全を期すために、それはIE

Answer 1

正しい答えは、私は、要素の（またはその親の1）displayを設定する必要があります（あまりにもFirefoxの上の）正しい％の値を取得するにはbugzilla

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

日に出願されたバグにコメントですnoneへ

テスト：http://jsfiddle.net/4RKsM/

不明確なものである：同じブラウザ/バージョンで（XP/win7のまたはMac OSX/Ubuntuでオペラ11.5には、Firefox 7を参照してください理由）異なるOS上では、動作は異なりますか？

Btw、@ thg435が送信された（およびmdnで報告された）仕様はまだ流動的です。

Answer 2

ように正しく動作します（それは常にピクセル値を返します）私はFirefoxのリリースより古い上でも、それを試みたが、それは正しくありません私はパーセンテージを表示していないことを知っています（私はff、オペラ、クロムを使用しています）。だから私はそれがFirefoxの問題だけではないと思う。

ただし、手動で計算することはできますが、ブラウザウィンドウが小さい場合は、定義済みの値に近い値になります。

parseInt($('#box').css('left'))/ $(window).width()*100; 

Answer 3

これはdocumented次のとおりです。すべての計算が実行された後に任意のCSSプロパティの

使用される値は、そのプロパティの最終的な値です。使用された値は、window.getComputedStyleを呼び出すことで取得できます。外形寸法（例えば幅、行の高さ）、全ての画素である...など

あなたはCSSルールが適用され、正確にどの知っている限り、指定された要素の「指定」CSSの値にアクセスする方法はないように思わ

とdocument.stylesheetsまたは同様のインターフェイスを使用してこのルールを解析します。