फ़ायरफ़ॉक्स और क्रोम ऑफसेट के लिए अलग-अलग मान देते हैं

मैं एक इनपुट तत्व के सापेक्ष एक स्पैन तत्व (इसे टूलटिप अवधि "कहता हूं) को स्थान देने की कोशिश कर रहा हूं। ऐसा करने के लिए, मैं टूलटिप अवधि और इनपुट क्षेत्र को दूसरे स्पैन तत्व में लपेट रहा हूं (चलिए इसे "रैपर अवधि" कहते हैं) जिसमें position: relative है। फिर मैंने टूलटिप अवधि पर position: absolute सेट किया। यह टूलटिप स्पैन स्थिति को स्वयं रैपर अवधि से संबंधित बनाता है लेकिन पृष्ठ प्रवाह का हिस्सा नहीं है - कोई भी स्थान नहीं ले रहा है। यह वही है जो मैं चाहता हूं।फ़ायरफ़ॉक्स और क्रोम ऑफसेट के लिए अलग-अलग मान देते हैं

फिर, जावास्क्रिप्ट का उपयोग करके, मैंने इनपुट तत्व की स्थिति के सापेक्ष टूलटिप की स्थिति निर्धारित की। चूंकि विभिन्न तत्वों पर इनपुट तत्व को अलग-अलग आकार दिया जा सकता है (स्क्रिप्ट को ग्लोबब्लैली लागू होना चाहिए), मैं रैपर अवधि से संबंधित अपनी स्थिति की गणना करने के लिए offsetTop और offsetLeft गुणों का उपयोग कर रहा हूं।

हालांकि, मैं यहां ब्राउज़र के बीच असंगतता को देख रहा हूं। फ़ायरफ़ॉक्स में, आईई 6, 7, 8, यह अपेक्षित के रूप में काम करता है। लेकिन क्रोम और सफारी में offsetTop रिपोर्ट की गई, ठीक है, गलत है।

यह साबित करने के लिए, मैं नीचे परीक्षण पृष्ठ बनाया:

<html> 
<head> 
<style type="text/css"> 
span { font-size: 8px; position: relative; top: 0; left: 0; border: 1px solid red } 
</style> 
</head> 
<body> 

<span id="wrapper"> 
<input id="foo" name="foo" type="text"> 
</span> 

<script type="text/javascript"> 
document.write("<br>Offset parent: " + document.getElementById("foo").offsetParent.id); 
document.write("<br>Offset top: " + document.getElementById("foo").offsetTop); 
</script> 

</body> 
</html>

और फ़ायरफ़ॉक्स और क्रोम में यह भरी हुई। दोनों ब्राउजर रैपर अवधि को offsetParent के रूप में रिपोर्ट करते हैं, लेकिन फ़ायरफ़ॉक्स के लिए offsetTop is -8 है और क्रोम के लिए यह 2 है। दृश्यमान रूप से पृष्ठ दोनों ब्राउज़रों में समान होता है।

यह मुझे सिरदर्द देता है, क्योंकि मैं किसी अलग ऑफ़सेट में हैक नहीं कर सकता हूं, जब मैं क्रोम का उपयोग कर रहा हूं, तो मैं हमेशा लागू होता हूं, क्योंकि अगर मैं फ़ॉन्ट आकार बदलता हूं, तो offsetTop नहीं बदलेगा, और मेरी स्क्रिप्ट टूट जाएगी।

क्या यह एक बग है? क्या मैं इसे अलग-अलग हल कर सकता हूं?

स्रोत

2009-09-24 waxwing

दस्तावेज़ तैयार होने तक प्रतीक्षा करने का प्रयास करें – Greg

मैंने इसे "असली" कोड में किया: इससे कोई फर्क नहीं पड़ता। मैंने फ़ायरबग में ऑफसेट टॉप का निरीक्षण किया है और क्रोम डेवलपर विंडो में और मान समान हैं। – waxwing

मैंने लेबल टैग को इस तरह (सत्यापन त्रुटि संदेश: http://d.pr/i/yvGS) को इनलाइन-ब्लॉक (पोस्टियन के साथ: पूर्ण;) बनाकर ले जाया है, फिर मार्जिन का उपयोग करके उसे प्लेसमेंट के सापेक्ष स्थिति में रखकर एचटीएमएल में, शीर्ष/दाएं/नीचे/बाएं गुणों के बजाय। कसरत हो सकता है, अगर ऐसा होता है तो आप अतिरिक्त जावास्क्रिप्ट से बच सकते हैं। – KruegerDesigns

jQuery का उपयोग करें। ब्राउज़र के बीच डोम अंतर उन चीजों में से एक है जो इसे एक्सेल करता है।

स्रोत

2009-09-24 18:55:35

पवित्र जंगली धातु! मैं यह कहने जा रहा था कि यह उन समस्याओं में से एक नहीं है जहां JQuery उत्तर है। लेकिन यह पता चला है कि एक स्थिति() फ़ंक्शन है जिसके बारे में मुझे पता नहीं था, वास्तव में यह चाल है।प्रश्न अभी भी बनी हुई है क्यों क्रोम/सफारी ऑफसेट को अलग-अलग रिपोर्ट करता है। लेकिन आप चेक प्राप्त करते हैं। – waxwing

आपको कोड window.onload फ़ंक्शन में डाल दें। मुझे फ़ायरफ़ॉक्स में पृष्ठ लोड के दौरान <script> से सीधे डोम के साथ काम करने का प्रयास करते समय समस्याएं याद आती हैं, और वेबकिट ऐसे बिंदुओं पर एक सौम्य डोम देने के लिए थोड़ा और इच्छुक है।

यह केवल मेरे सामने आने वाले पूर्व मुद्दों पर आधारित है, मुझे यकीन नहीं है कि यह आपके मामले पर लागू है या नहीं।

स्रोत

2009-09-24 18:53:11 olliej

मैं एक ही समस्या में भाग गया, और jQuery की स्थिति() फ़ंक्शन ऑफसेट() फ़ंक्शन के समान रिपोर्टिंग कर रहा था। आखिरकार यह पता चला कि दस्तावेज़ तैयार होने की प्रतीक्षा भी मेरे लिए काम नहीं कर सका। मुझे ऑफसेट() बाद में प्रवाह में जांचना पड़ा (मेरे मामले में, मेरे हैंडलर में जिसे window.scroll ईवेंट पर निकाल दिया गया है)।

जब मैं नीचे दिए गए इस टेस्ट कोड को पृष्ठ लोड पर आज़माता हूं, तो मुझे फ़ायरफ़ॉक्स + क्रोम के लिए अलग-अलग आंकड़े मिलते हैं। एक बार यह लोड हो जाने पर, मैं 'डी' दबा सकता हूं और मुझे दोनों ब्राउज़रों के लिए एक ही आंकड़ा मिलता है।

// this produced different results on Chrome + Firefox (Chrome was wrong!) 
$(document).ready(function() { 
    var x = $('#some-div-on-your-page').position().top; 
    alert("On load, offset is "+x); // Chrome + Firefox report diff figures 

    $(window).keydown(function(e, r) { 
    k = e ? e.keyCode : event.keyCode; 
    if(k == 68) {  // press 'd' 
     var x = $('#some-div-on-your-page').position().top; 
     alert("Now the offset is "+x); // ...but this is consistent 
    } 
    }); 
}

उम्मीद है कि इससे मदद मिलती है।

स्रोत

2010-07-13 22:46:03 Eric

मुझे आपके जैसा ही समस्या हो रही है और मुझे एहसास हुआ कि (मेरे मामले में) ऑफसेट() को गड़बड़ कर रहा था जो चीज क्रोम में शीर्ष मान था, "ऊंचाई" के बिना एक या अधिक छवियां थीं तत्व के ऊपर विशेषता।

पहले

<img src="/images/foo.jpg" />

offset.top()

offset.top() 150 फ़ायरफ़ॉक्स और IE7 (Beleive में था या नहीं, यह IE में ठीक काम किया क्रोम

में 100 था!)

बाद

<img src="/images/foo.jpg" height="50" width="50" />

offset.top() फ़ायरफ़ॉक्स, आई 7, और क्रोम दोनों में 150 है।

ध्यान दें कि अंतर 50px था, जो वास्तव में छवि की ऊंचाई के समान है।

चूंकि मैं एक JQuery प्लगइन विकसित कर रहा था, इसलिए मैंने उन सभी छवियों को इकट्ठा करने की कोशिश की जिनकी चौड़ाई और ऊंचाई विशेषताओं को अपरिभाषित किया गया था, और मैन्युअल रूप से .width() और .height() के साथ अपना आकार सेट करना था, लेकिन यह नहीं था काम, क्योंकि क्रोम दोनों कार्यों के लिए 0 लौटा। तो, मुझे लगता है कि offset.top() वास्तव में उस पर निर्भर करता है। यदि JQuery "उपरोक्त" तत्व की ऊंचाई को जमा करके te offset.top() मान प्राप्त करने के लिए परीक्षण कर रहा है, और उन तत्वों में से एक यह एक निर्दिष्ट ऊंचाई वाली छवि है, तो "0" उस योग में जोड़ा जाएगा, और इसलिए शीर्ष मान उन "अनदेखा" ऊंचाइयों में गायब हो जाएगा।

पीएस: मेरी अंग्रेजी के लिए खेद है, यह एक लंबा समय रहा है क्योंकि मैंने इस भाषा में लंबे टेक्स्ट लिखा था!

स्रोत

2010-10-19 15:57:05 Nicolas