تركز سوف UL لا تتوسع أفقيا في فايرفوكس / أوبرا (يعمل في رحلات السفاري، IE6 / 7/8)

Question

ولدي المجاهدين تركز (على غرار مثل جدول علاء cssplay) التي هي بعد أن العناصر لى أضافت إليها بعد عرض الصفحة، ويبدو للعمل بشكل جميل في كل شيء ولكن فايرفوكس وأوبرا.

والتأثير المطلوب هو أن يكون صف من عناصر لى تركز حتى إذا كان هناك واحد فقط أو اثنين منهم. يحاكي هذا المثال القضية مع مسج إضافة لى ثانيتين بعد الصفحة مستعدة لذلك.

لسبب ما، يبدو مثل فايرفوكس وأوبرا 3.05 9.63 حفاظ على المجاهدين في العرض التعادل الأولي بعد يضاف لى الثالث، على الرغم من عدم وجود عرض محدد في أي مكان في CSS.

وهذا هو، بطبيعة الحال، قتل لي على الاطلاق، وأي مساعدة سيكون موضع تقدير.

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display -table.html

Answer 1

وأنواع عرض table-* لا تزال underdefined تماما، وذلك ليس من المستغرب أن كنت الحصول على سلوك مختلف هنا. في تجربتي، لديها FF أيضا بعض القضايا مع تطبيق قواعد معينة لمحتوى المدرجة. لحسن الحظ، على الرغم من أن هناك طريقة أكثر سهولة لرمز هذه الصفحة أن يحدث أيضا أن <م> العمل .

وبدلا من وضع <ul/> إلى display:table، وترك الأمر كما display:block (الافتراضي) واعطائها text-align:center. كنت لا تهتم فعلا أن <ul/> shrinkwraps الجداول مضمنة في هذه الحالة (والذي هو النتيجة النهائية أن التعليمات البرمجية هو تحقيق)، وتريد فقط الجداول نفسها أن تركز.

وعلى سبيل المكافأة، وهذا يسمح لك لإزالة <div/> التفاف، لأنه فقط هناك لتوفير حدود لهوامش <ul/> لدفع قبالة. منذ كنت لا تستخدم تلك الهوامش بعد الآن، يمكنك ببساطة استخدام <ul/> باسم كتلة تحتوي على، واعطائها الحدود بدلا من ذلك.

Answer 2

لا أستطيع أن أعطيك إجابة حقيقية، ولكن لأن لا أحد آخر قد استجاب ... ركضت من خلال ذلك في الحرائق (في فايرفوكس 3.01)، وعندما غيرت أسلوب CSS من #rounds li إلى شيء آخر، ويقول مضمنة، ثم العودة إلى طاولة مضمنة، تصحيح التخطيط نفسها. بحيث يبدو مثل قواعد CSS الخاصة بك على ما يرام، وأنه يرتبط المشكلة إلى حقيقة أن يتم إدراج قائمة البند الاضافي من خلال جافا سكريبت. راجعت أيضا أنه من خلال التخلص من مسج وإدراج برنامج نصي W3C DOM أن تفعل نفس الشيء، والمؤكد، نفس المشكلة.

وأنا أتساءل عما إذا كنت قد وجدت خطأ في فايرفوكس (وأوبرا، أعتقد)، حيث كانت الصفحة لا المتدفق بشكل صحيح عندما يتم إدراج الأشياء عن طريق جافا سكريبت.

Answer 3

ويبدو أنك وضع inline-table داخل table، وtable-cells داخل table دون أي table-row. منذ هذا ليس صحيحا، قد يؤدي أي سلوك متصفح عشوائي.

في أي حال، وسوء يدعم display: table* (وخصوصا في IE). إذا كنت تريد تخطيط الجدول اليوم فمن الأفضل أن العصا مع الجداول الفعلية. بالتأكيد ليس تماما ما كنت تحاول تحقيق. كما يقترح Xanthir هناك طرق أسهل لتحقيق تمركز بسيط.