لا يطبق Internet Explorer 10 flexbox على العناصر المضمنة

Question

وفق مواصفات فليكس بوكس يجب تحويل العنصر المرن المرن (أبناء الحاوية المرنة) إلى display:block.لا يطبق Internet Explorer 10 هذا التحويل، وبالتالي لا يعمل flexbox على العناصر الممتدة (المضمنة).

هنا أ com.codepen مما أعنيه

يمكنني فقط استخدام divs ولكني أرغب في معرفة ما إذا كان هذا خطأ في المستكشف وما إذا كان هناك حل أفضل من تغيير كود html.

Answer 1

هذا فقط لأن مواصفات flexbox (مسودة العمل) تغيرت بعد إصدار IE10.

فيما يلي الجزء ذي الصلة من نص المواصفات من مسودة عمل CSS Flexbox، كما كانت موجودة عندما تم إصدار IE10 في نهاية عام 2012:

تعمل خوارزمية التخطيط المرن على الصناديق التي تم إنشاؤها بواسطة العناصر المرنة.يصبح كل مما يلي عنصرًا مرنًا:

[...]

4.كتلة مجهولة ملفوفة حول سلسلة متجاورة من العناصر الفرعية المضمنة غير المستبدلة.

مصدر: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items

أ span هو "عنصر فرعي مضمن غير مستبدل".لذلك IE10 يلتف span (وأي محتوى مضمن مجاور) في كتلة مجهولة (مطابقة للمواصفات القديمة) بدلاً من تحويلها ل كتلة (حسب المواصفات الجديدة).

أظن أن Microsoft لم ترغب في تغيير هذه الوظيفة بعد الإصدار، لتجنب كسر المحتوى الذي تم ترميزه بالفعل لتوقع سلوك معين في IE10.

لذلك إذا كنت تريد كتابة محتوى flexbox الذي يعمل كلاهما في IE10 و في الإصدارات الأحدث من المتصفح، فمن الأفضل عدم الاعتماد على هذا السلوك المحدد.(كن صريحًا؛تغيير هذه الامتدادات إلى div، أو منحهم display:block, ، نظرًا لأنك تعلم أنه سيتم تحويلها إلى كتل في المتصفحات الأحدث على أي حال.)

Answer 2

هل جربت هذه الخاصية؟

display:-ms-inline-flexbox; (لحاوية flexbox المضمنة).