प्रतिशत सीएसएस मानों को पुनर्प्राप्त करना (फ़ायरफ़ॉक्स में)

Question

मुझे फ़ायरफ़ॉक्स पर सटीक सीएसएस संपत्ति मान ('%' में) पुनर्प्राप्त करने में कोई समस्या है।

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

और इस सीएसएस:

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

और मैं बाईं स्थिति पुनः प्राप्त करना चाहते हैं ('%' में) जे एस द्वारा

मान लीजिए हम इस अत्यंत सरल मार्कअप है

यह mootools के साथ बहुत आसान Obv है (डेमो ->http://jsfiddle.net/steweb/AWdzB/):

0,123,

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'); 

लेकिन अगर आप यह पर कोशिश फ़ायरफ़ॉक्स (8.0 .1) आप देखेंगे कि परिणाम सही नहीं है (10% होना चाहिए, लेकिन यह 91px है)। प्रश्न हैं: क्या फ़ायरफ़ॉक्स के इस नए संस्करण पर कोई बग है? क्या कोई जानता है कि यह ज्ञात बग है? क्या मुझसे कुछ गलत हो रही है?

धन्यवाद :)

अद्यतन: मैं पर पुराने फ़ायरफ़ॉक्स विज्ञप्ति भी इसे करने की कोशिश, और यह सही नहीं है (यह हमेशा पिक्सल मान देता है) .. पूर्णता के लिए, यह आईई

Answer 1

सही जवाब बग मैं बगजिला को दायर की पर एक टिप्पणी है

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

(भी फ़ायरफ़ॉक्स पर) सही% मूल्य प्राप्त करने के लिए तत्व (या इसकी माता-पिता में से एक) display सेट किया जाना चाहिए none को

टेस्ट: http://jsfiddle.net/4RKsM/

अस्पष्ट बात है: क्यों एक ही ब्राउज़र/संस्करण पर (देखें, Firefox 7 XP/Win7 या मैक OSX/ubuntu पर ओपेरा 11.5 पर) लेकिन विभिन्न ओएस पर, व्यवहार अलग है?

बीटीडब्ल्यू, spec @ thg435 पोस्ट (और एमडीएन पर रिपोर्ट) अभी भी प्रवाह में है।

Answer 2

के रूप में पर ठीक से काम करता मुझे पता है, इसने कभी प्रतिशत नहीं दिखाया है (मैं एफएफ, ओपेरा और क्रोम का उपयोग करता हूं)। तो मुझे लगता है कि यह केवल एक फ़ायरफ़ॉक्स समस्या नहीं है।

हालांकि, आप इसे मैन्युअल रूप से गणना कर सकते हैं, लेकिन ब्राउज़र विंडो छोटी है, तो यह निश्चित मान के करीब है।

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

Answer 3

यह documented है:

किसी भी सीएसएस संपत्ति का उपयोग किया गया मान है कि संपत्ति के अंतिम मूल्य के बाद सभी गणना प्रदर्शन किया गया है है। विंडो.getComputedStyle को कॉल करके प्रयुक्त मान पुनर्प्राप्त किए जा सकते हैं। आयाम (जैसे चौड़ाई, line-height) सभी पिक्सल में हैं ... आदि

वहाँ, किसी दिए गए तत्व के लिए "निर्दिष्ट" सीएसएस मूल्यों तक पहुँचने के लिए कोई रास्ता नहीं होने के लिए जब तक आप जानते हैं कि वास्तव में कौन सीएसएस नियम लागू होता है लगता है और document.stylesheets या इसी तरह के इंटरफ़ेस का उपयोग करके इस नियम को पार्स करें।