الكشف عن دعم المتصفح العرض:مضمنة كتلة

Question

كيف يمكنك الكشف عن ما إذا كان المتصفح يدعم CSS سمة العرض:مضمنة كتلة ؟

Answer 1

وليس هناك طريقة للكشف عن أنه مع جافا سكريبت كما هو سمة CSS النقية التي لا علاقة لها بأي شيء أو وظيفة في جافا سكريبت. أفضل شيء استطيع ان اقول لكم هو للتحقق هنا عن التوافق جيدة قائمة واستخدام CSS لإنشاء الحل.

Answer 2

هذا ما يمكن أن تذهب إذا كنت تريد أن تفعل ذلك بحتة من خلال دراسة bavhiour من المتصفح w/ جافا سكريبت بدلا من وكيل المستخدم استنشاق:

إعداد اختبار السيناريو و التحكم في السيناريو.مع البنية التالية:

• div
  • div w/ محتوى "اختبار"
  • div w/ محتوى "test2"

إدراج نسخة واحدة في المستند مع اثنين الداخلية divs مجموعة مضمنة كتلة و إدراج نسخة أخرى في المستند مع اثنين الداخلية divs تعيين كتلة.إذا كان المتصفح يدعم inline-block, ثم تحتوي divs سوف يكون ارتفاعات مختلفة.

البديل الجواب:

يمكنك أيضا استخدام getComputedStyle أن نرى كيف أن المتصفح هو علاج معين عنصر css.لذا ، من الناحية النظرية ، يمكن إضافة عنصر مع "display:مضمنة كتلة" ثم التحقق من computedStyle لمعرفة ما إذا كان نجا.المشكلة الوحيدة:IE لا يدعم getComputedStyle.بدلا من ذلك, فقد currentStyle.أنا لا أعرف إذا كان currentStyle وظائف مماثل (ويفترض أنه يعمل بالمثل إلى سلوك نريد:تجاهل "صالح" القيم).

Answer 3

وفقا QuirksMode الرسوم البيانية, فقط التيار المتصفحات لا تدعم inline-block هي IE6 و 7.(حسنا, أنها تدعم ذلك ، ولكن فقط على العناصر التي لها الأم display نوع من inline.) كنت مجرد افتراض معتمد ومن ثم تطبيق الحل البديل IE6/7 via الشرطي تعليقات.

(ملاحظة:أنا تجاهل فايرفوكس 2 عدم وجود دعم inline-block وعلى افتراض أن الغالبية العظمى من المستخدمين بالترقية إلى FF3 ، ولكن باختصار غوغلينغ لم يكتشفه أي أرقام لدعم ذلك.YMMV.)

إذا كان تحديد الدعم من جافا سكريبت هو الخيار الوحيد الخاص بك ومع ذلك ، يجب أن تعود مرة أخرى إلى وكيل المستخدم استنشاق.على YAHOO.env.ua فئة من YUI المكتبة هو مفيد قطعة من التعليمات البرمجية التي يمكن نسخ الاستخدام.(انها BSD مرخصة ، لا تعتمد على أجزاء أخرى من يوي المكتبة, و هو فقط حوالي 25-30 خطوط بدون تعليق)

Answer 4

وبالمناسبة: هناك بارعه طريقة لتنفيذ عبر متصفح مضمنة تزرع في IE6 +، + FF2، وأوبرا وبكت مع CSS وحدها. (غير صالح CSS، ولكن لا يزال CSS فقط).

Answer 5

كريستوفر Swasey هو الصحيح تماما.

ولقد شكلت تجريبي jsFiddle من أسلوبه في http://ajh.us/test- مضمنة كتلة .

والرمز هو في الأساس:

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.