क्रॉस ब्राउज़र ऑफ़सेटविड्थ

मुझे अलग-अलग ब्राउज़रों में ऑफसेटविड्थ का उपयोग करने में कोई समस्या है। परिणामों में यह अंतर कुछ अजीब लेआउट पैदा कर रहा है। मैंने एक बहुत छोटा उदाहरण बनाया है जो मैं देख रहा हूं।क्रॉस ब्राउज़र ऑफ़सेटविड्थ

jsbin

एचटीएमएल

<table id="tbl"> 
    <tr> 
    <td>Cell 1</td> 
    <td>Cell 2</td> 
    </tr> 
</table> 
<button onclick="calc()">Calculate Offset Width</button> 

<div>Cell 1 offsetWidth: <span id="c1offWidth"></span></div>

function calc(){ 
    document.getElementById('c1offWidth').innerHTML = 
     document.getElementById('tbl').children[0].children[0].offsetWidth; 
}

सीएसएस

Erik Meyer's Reset CSS

जब मैं क्रोम, सफारी, और ओपेरा पर इस चलाने सेल 1 की भरपाई की चौड़ाई के लिए दिए गए मान 72. जब मैं फ़ायरफ़ॉक्स पर इस चलाने के लिए और है IE9-10 दिए गए मान 77

मैं था इंप्रेशन के तहत पैडिंग और सीमा सहित तत्व की चौड़ाई की गणना करने का यह सबसे अच्छा तरीका था।

क्या कोई क्रॉस ब्राउज़र समाधान है जो हमेशा एक ही परिणाम देगा? मैंने jQuery का उपयोग करने की कोशिश की लेकिन परिणाम और भी भ्रमित थे।

EDIT क्योंकि हर कोई बाहरी विड्थ की सिफारिश कर रहा है क्योंकि मैंने इसके लिए एक jsbin भी बनाया है। परिणाम अभी भी ब्राउज़र में भिन्न हैं। क्रोम 36 देता है; IE9-10 और Firefox लौट 39.

jsbin updated

स्रोत

2013-02-20 Mark Meyer

वे इतने सारे अज्ञानी खेलने DOH तरह jQuery का उपयोग कर जब हम मूर्तिकला मिट्टी का उपयोग करना चाहिए प्रोग्रामर की असंगति! मूल जेएस का प्रयोग jQuery की तरह कुछ संसाधन हॉग लाइब्रेरी नहीं है। अपने जेएसपीआरएफ परीक्षण करो! – EasyBB

आह हाँ, पुरानी 1 वैश्विक 1 फ़ाइल तकनीक। http://www.avacweb.com/17860.js। अपने उपयोगकर्ताओं को धीमा करने के लिए महान पैटर्न। – BradGreens

चूंकि आपने jQuery के साथ पोस्ट को टैग किया है, मुझे लगता है कि एक jQuery समाधान स्वीकार्य है। outerWidth() के साथ क्या गलत है?

उदाहरण के लिए:

function calc() 
{ 
    var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth(); 
    $('#c1offWidth').html(the_width); 
}

jQuery का उपयोग करते हुए तालिका के लिए लाभ के एक नंबर लाता है (जैसा कि आप ऊपर की जरूरत कोड की कम राशि से देख सकते हैं)। आपको भी गैर-घुसपैठ करने वाले ईवेंट हैंडलर का उपयोग करने पर विचार करना चाहिए। उदाहरण के लिए, अपने button से onclick विशेषता निकाल सकते हैं और ऐसा करते हैं:

$(function() { 
    $('button').click(function() { 
     var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth(); 
     $('#c1offWidth').html(the_width); 
    }); 
});

कृपया jsFiddle demo देखते हैं।

स्रोत

2013-02-20 22:19:03 BenM

jQuery समाधान निश्चित रूप से स्वीकार किए जाते हैं! दुर्भाग्य से यह डेमो क्रोम में 36 लौटा लेकिन आईई में 39। यह –

समस्या को हल करने के लिए प्रतीत नहीं होता है, यह फ़ायरफ़ॉक्स में 39px भी देता है। यह फ़ंक्शन के साथ कोई समस्या नहीं है - यह सही मान लौटा रहा है। 'समस्या' वह तरीका है जिससे विभिन्न ब्राउज़र डिफ़ॉल्ट रूप से तत्व प्रस्तुत करते हैं। उदाहरण के लिए, यदि आप '# tbl' के लिए निश्चित चौड़ाई निर्दिष्ट करते हैं, तो परिणाम मानकीकृत होते हैं> http://jsfiddle.net/H2uGz/2/ – BenM

समस्या का एक हिस्सा यह था कि सभी बाहरी विड्थ और ऑफसेटविड्थ फ़ंक्शंस वापस किए गए मानों को गोलाकार करते हैं। जैसा कि आपने अनुशंसा की थी, तालिका पर चौड़ाई निर्धारित करके इसे कम किया गया था। –

offsetWidth विश्वसनीय पार ब्राउज़र नहीं है। मैं इसके बजाय jQuery के outerWidth() का उपयोग करने की अनुशंसा करता हूं।

$("#your-element").outerWidth();

DEMO देखें।

स्रोत

2013-02-20 22:16:22 zakangelle

यदि आप सीमा-ब्राउज़र की गणना की चौड़ाई पाने की आवश्यकता है तो सीमाओं और मार्जिन जैसी चीजों को शामिल करने के लिए आप jQuery के .outerWidth() का उपयोग कर सकते हैं।

स्रोत

2013-02-20 22:18:37

आपके उदाहरण में वास्तविक समस्या उस भिन्न ब्राउज़र में प्रतिपादन के लिए अलग-अलग डिफ़ॉल्ट फोंट का उपयोग करती थी। और आपके कोशिकाओं के लिए बॉक्स-साइजिंग सामग्री द्वारा परिभाषित किया गया है। यदि आप तत्व के लिए निश्चित चौड़ाई निर्धारित करते हैं (जैसा कि टिप्पणी में से एक में सही ढंग से बताया गया है) तो आपको निश्चित और बराबर परिणाम मिल जाएगा।

पुनश्च: टिप्पणी पोस्ट नहीं कर सकते हैं ...

स्रोत

2013-08-01 09:27:01 Surgeon

असल में, मुझे लगता है कि यह स्वीकार्य उत्तर होना चाहिए! अन्य सभी "blabla-use-jquery" उत्तरों किसी भी तरह से समस्या से निपटने नहीं करते हैं। जैसे कि jQuery एक और चौड़ाई लौटाएगा - जो निश्चित रूप से नहीं करता है। –

उत्तर

संबंधित मुद्दे