قبل عام ، لم يكن هناك مقال عن سمة الكتلة المضمنة على الإنترنت. من أجل تسهيل الجميع لفهم السمة بشكل أفضل ، قمت بتلخيص المقالة وتجميعها "العمق: فهم متعمق للعرض: كتلة مضمنة".
الآن هناك طلب متزايد على تطبيق سمات كتلة مضمنة. لسوء الحظ ، تدعم Firefox3 Beta و IE8 Beta و Opera و Safari سمات الكتلة المضمنة (ملاحظة: فقط الأوبرا و Safari تدعمهم) ، ولكن يمكن لـ IE6 و IE7 محاكاة عن طريق تشغيل Haslayout. يحتوي Firefox2 على سمات خاصة -Moz-Inline-Box و -Moz-Inline-Stack (تم نقل المقارنة بين هاتين السمة من Qin GE "مثالان على تطبيق العرض: inline block").
في التطبيقات الفعلية-سيكون لدى Moz-Inline-Box مشاكل مثل التوافق بين العناصر. على الرغم من أن Firefox لديها أيضًا خاصية خاصة-محاذاة صندوق للمساعدة في حل مشكلة المحاذاة ، إلا أنه لا يزال من الصعب التنبؤ بالعديد من المشكلات. من الناحية نسبيًا ، فإن-Moz-Inline-Stack يؤدي بشكل أكبر مثل الكتلة المضمنة ، والتي يمكن اختبارها في Firefox3. ومع ذلك ، سيكون هناك أيضًا خطأ عند استخدام -Moz-Inline-Stack. إذا كان العنصر الخارجي للعرض: -Moz-Inline-Stack ؛ يتم عرضه: مضمّن ؛ والتي ستجعل الروابط الواردة في Firefox غير قابلة للاشمئزاز ، وهذا يجب حله عن طريق الموقف: النسبي ؛.
الرمز النهائي الذي قمنا محاكمته هو على النحو التالي:
العرض: كتلة مضمنة. /*Firefox3 Beta ، IE8 Beta ، Opera ، Safari Support ، Haslayout يؤدي إلى العنصر المضمّن تحت IE*/
العرض: -moz-inline-stack ؛ / * السمات الخاصة لـ Firefox ، يمكنك أيضًا استخدام -Moz-Inline-Box */
التكبير: 1 ؛ /*أي Trigger Haslayout*/
*العرض: مضمّن ؛ /*بمجرد تشغيل haslayout تحت IE ، فإن تعيين عنصر الكتلة على الخط المضمّن سيجعل الشاشة: تأثير مضمّن مشابه لـ Display: Inline Block*/
استقلال النص: -9999px ؛
*استولى النص: 0 ؛
حجم الخط: 0 ؛
Line-Leight: 0 ؛ /* إذا كنت تريد إخفاء النص ، فيمكن استخدام هذه السمات الأربع*/
/*بالإضافة إلى ذلك ، يمكن إخفاء النص المخفي أعلاه ، ويمكن استخدام طريقة أكثر بساطة: ارتفاع الخط: قيمة كبيرة للغاية ؛ حجم الخط: 0 ؛ */
الفائض: مخفي. /* إخفاء محتوى الفائض*/
المحاذاة الرأسية: الأوسط ؛ /* توسيط عمودي داخل الخط ، للانحراف الأكبر للأوبرا*/
عرض:؟ PX ؛ /*؟ هل أي قيمة غير AUTO*/
ارتفاع:؟ PX ؛ /*؟ هل أي قيمة غير AUTO*/