مشاكل CSS:مع التنقل المنسدل المخصص لـ ul,li في ie، خاصة مع خطأ ie6 overflow:visible

Question

يمكن رؤية جوهر خطأ ie6 (يجب اقتطاع إدخالات القائمة المنسدلة عبر إخفاء السعة لمنع أي من التوسيع بشكل غير صحيح بدلاً من العمل كتجاوز: مرئي) في شكله الحالي (المخترق) في لقطة الشاشة أدناه، وعلى الموقع http://zd-cms.com

خطأ (أي 6):

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

اليمين (FF، IE8، Chrome):

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

يجب أن يظهر إدخال القائمة:

• اتصل بنا
• الموزعين
• يدعم
• خدمات المصمم

ولكن بما أنني لا أستطيع تجاوز السعة: العمل المرئي أو محاكاته بطريقة أخرى، يتم قطع أجزاء من القوائم المنسدلة.حاليًا، CSS في ورقة الأنماط الخاصة بـ ie6 هو:

#zd-nav {
  padding-left:0;
  margin-left:0;
  background-color:transparent;
}
#zd-nav .zd-sub-nav{
  margin-top:5px;
  **width:73px**;
  **overflow:hidden;**
}

بعض الحلول للأخطاء التي جربتها:أنا على علم بتجاوز سعة IE6: الخطأ المرئي، (حسب ما هو موضح هنا: http://www.positioniseverything.net/explorer/expandingboxbug.html )، مما يجعل تجاوز السعة: مرئيًا فارغًا وباطلا.من خلال قراءة: استراتيجية لإصلاح أخطاء التخطيط في IE6؟ وحاولت بعض الاختراقات لمحاولة جعله يعمل بالفعل كتجاوز: مرئي، ولكن لم ينجح شيء.

لقد قمت الآن بتعيين الجزء المنسدل من القائمة على تجاوز السعة: مخفي كحل أخير لأنني لا أستطيع الحصول على ie6 للسماح للقائمة بالعمل بطريقة تجاوز السعة: مرئية.

الإشارة إلى أي مشاكل تتعلق بالتنقل في ie7 أو ie8 سيكون موضع تقدير كبير أيضًا.

اقتراحات؟

Answer 1

لقد نجح هذا بالنسبة لي:

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

يمنح التعويم li العرض الصحيح، والموضع النسبي ومؤشر z يجعله يظهر أعلى (أي غير مقيد بـ) ul.

Answer 2

جرب ذلك (بافتراض أنك تريد السماح للقائمة المنسدلة [زائد فرعية فرعية] أيضًا "بالتعويم" فوق أي عناصر أخرى في الصفحة تعترض طريقك):

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

لن يؤدي إجبار li الذي يحتوي على التنقل الفرعي إلى الموضع النسبي إلى تغيير الموضع على الصفحة.ومع ذلك، فهو يسمح لك باستخدام الموضع المطلق على العناصر الفرعية، مع الاحتفاظ بها داخل الأصل بشكل افتراضي، وتحريرها من "تدفق" الصفحة (وبالتالي منع تأثير الدفع لأسفل).

Answer 3

حاول إما:

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

أو...

width:100%; /*instead of setting the width to 73px*/

يمكنك القيام به height:100%; أيضًا.

إنها مشكلة hasLayout التي اخترعتها Microsoft.وجدت المعلومات هنا: http://zoffix.com/css/ie/haslayout.shtml

أتمنى أن يساعدك هذا...

Answer 4

هذا يجب أن يعمل

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

يتم استخدام العرض التلقائي لاعتماد حجم كل عنصر تنقل دون الحاجة إلى إعطاء كل عنصر عرضًا ثابتًا.

أتمنى أن يساعدك هذا.

Answer 5

أقترح استخدام موضع نسبي للحاوية، مع تحديد الأعلى واليسار والعرض