प्रदर्शन के लिए ब्राउज़र समर्थन का पता लगाएं: इनलाइन-ब्लॉक

Question

कोई ब्राउज़र आपको सीएसएस विशेषता प्रदर्शन का समर्थन करता है या नहीं: इनलाइन-ब्लॉक?

Answer 1

जावास्क्रिप्ट के साथ इसका पता लगाने का कोई तरीका नहीं है क्योंकि यह एक शुद्ध सीएसएस विशेषता है जो जावास्क्रिप्ट में किसी ऑब्जेक्ट या फ़ंक्शन से संबंधित नहीं है। सबसे अच्छी बात यह है कि मैं आपको एक अच्छी अच्छी संगतता सूची के लिए here जांचना और वर्कअराउंड बनाने के लिए सीएसएस का उपयोग करना चाहता हूं।

Answer 2

QuirksMode charts के अनुसार, केवल मुख्य धारा inline-block का समर्थन नहीं ब्राउज़रों IE6 और 7 (खैर, वे इसे समर्थन है, लेकिन केवल तत्व है जो inline के एक देशी display प्रकार है के लिए।) मैं सिर्फ मान चाहते हैं इसका समर्थन किया है और उसके बाद आईई 6/7 के लिए conditional comments के माध्यम से एक वर्कअराउंड लागू करें।

(नोट:। मैं inline-block के लिए समर्थन की फ़ायरफ़ॉक्स 2 की कमी की अनदेखी कर रहा हूँ और उन के विशाल बहुमत संभालने FF3 में अपग्रेड किया है, लेकिन संक्षिप्त Googling किसी भी संख्या का पता लगाने नहीं था कि बैक अप करने के लिए YMMV।)

यदि जावास्क्रिप्ट से समर्थन निर्धारित करना आपका एकमात्र विकल्प है, तो आपको उपयोगकर्ता-एजेंट स्नीफिंग पर वापस आना होगा। YAHOO.env.uaYUI library से कक्षा कोड का एक आसान हिस्सा है जिसे आप कॉपी और उपयोग कर सकते हैं। (यह बीएसडी लाइसेंस प्राप्त है, यह यूयूआई लाइब्रेरी के अन्य हिस्सों पर निर्भर नहीं है, और टिप्पणियों के बिना केवल 25-30 लाइनें हैं)

Answer 3

ठीक है, अगर आप इसे पूरी तरह से बैवियर की जांच करके करना चाहते हैं तो आप यहां जा सकते हैं उपयोगकर्ता एजेंट स्नीफिंग के बजाय ब्राउज़र w/जावास्क्रिप्ट का:

एक परीक्षण परिदृश्य और नियंत्रण परिदृश्य सेट करें। के साथ, कहते हैं, निम्नलिखित संरचना:

• div
  • डब्ल्यू div/सामग्री "परीक्षण"
  • डब्ल्यू div/सामग्री "test2" में

सम्मिलित एक प्रतिलिपि दो आंतरिक divs के साथ दस्तावेज़ इनलाइन-ब्लॉक पर सेट है, और ब्लॉक में सेट दो आंतरिक divs के साथ दस्तावेज़ में एक और प्रतिलिपि डालें। यदि ब्राउज़र इनलाइन-ब्लॉक का समर्थन करता है, तो युक्त divs की अलग-अलग ऊंचाई होगी।

वैकल्पिक जवाब:

तुम भी देखना चाहते हैं कि ब्राउज़र एक दिया तत्व के सीएसएस इलाज है getComputedStyle उपयोग कर सकते हैं। तो, सिद्धांत रूप में, आप "डिस्प्ले: इनलाइन-ब्लॉक" के साथ एक तत्व जोड़ सकते हैं और फिर यह देखने के लिए गणना की गई स्टाइल की जांच करें कि यह बचे हुए हैं या नहीं। केवल समस्या: IE getComputedStyle का समर्थन नहीं करता है। इसके बजाए, इसमें वर्तमान स्टाइल है। मुझे नहीं पता कि वर्तमान स्टाइल समान रूप से कार्य करता है (संभवतः यह हमारे इच्छित व्यवहार के समान कार्य करता है: "अमान्य" मानों को अनदेखा करना)।

Answer 4

वैसे: अकेले सीएसएस के साथ IE6 +, FF2 +, ओपेरा में पार ब्राउज़र इनलाइन-ब्लॉक और वेबकिट लागू करने के लिए a neat way नहीं है। (मान्य सीएसएस नहीं, लेकिन अभी भी केवल सीएसएस।)

Answer 5

Christopher Swasey काफी सही है।

मैंने अपनी तकनीक का एक jsFiddle डेमो http://ajh.us/test-inline-block पर स्थापित किया है।

कोड अनिवार्य है:

var div = document.createElement('div'); 
div.style.cssText = 'display:inline-block'; 

// need to do this or else document.defaultView doesn't know about it 
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally 

var results = false; 

if (div.currentStyle) { 
    results = (div.currentStyle['display'] === 'inline-block'); 
} else if (window.getComputedStyle) { 
    results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block'; 
} 

//clean up 
$(div).remove(); 

alert('display: inline-block support: '+results); 

कृपया ध्यान दें यह ठीक उसी तकनीक भी display: run-in समर्थन पता लगाने के लिए काम करता है।