أفضل طريقة لإصلاح القائمة المنسدلة CSS/JS في IE7 عندما تتضمن الصفحة خريطة Google

Question

لدي صفحة تستخدم <ul> قوائم للتنقل (يقوم Javascript بتغيير التصميم ليتم عرضه أو عدم عرضه عند تمرير الماوس).

هذا يعمل بشكل جيد بالنسبة لي يستثني في IE6 وIE7 عندما يكون لدي خريطة Google على الصفحة.

في هذه الحالة، القائمة المنسدلة ببساطة لا تعمل.ومع ذلك، تستمر الصفحة في العمل في FireFox 2.

لقد أجريت القليل من البحث واكتشفت أن هذا قد يكون مثالاً على خطأ IE Select Box Bug، لكنني لست متأكدًا حيث يبدو أن خريطة Google تستخدم <div>, ، ليس <iframe>.

هل واجه أي شخص آخر مشكلة مشابهة لهذه، وإذا كان الأمر كذلك، فهل لديه أي توصيات حول أفضل طريقة للتغلب على هذه المشكلة؟

Answer 1

لا أعرف ما إذا كان هذا سيحل مشكلتك ولكن قد ترغب في المحاولة هذا الحل في ccsplay.co.uk والذي يحل مشكلة ظهور القوائم أسفل القوائم المنسدلة.لا أعرف إذا كان سيعمل بالتأكيد، لكنه يستحق المحاولة.

Answer 2

لقد أصلحت مشكلة مماثلة تتعلق بعدم ظهور القوائم المنسدلة فوق أفلام الفلاش في IE6/IE7/IE8 باستخدام هذا مسج:

$(function () {
  $("#primary-nav").appendTo("#footer");
});

أين primary-nav هل ID لعنصر الحاوية المنسدلة و footer هل ID للعنصر الأخير في الصفحة.ثم استخدمت الموضع المطلق لنقل القوائم المنسدلة إلى الأعلى حيث تنتمي.

السبب وراء نجاح هذا هو أن IE يحترم ترتيب المصدر أكثر مما يفعل z-index.ومع ذلك، لا يزال غير قادر على العرض أعلى المكون الإضافي لـ Windows Media Player.

Answer 3

أعتقد أن هذا قد يحدث بسبب استخدام Active-X الذي يستخدمه IE 6+ لتحليل CSS.

مع مرور الوقت، اضطررت إلى تكييف عملي ليشمل بعض اختراقات IE على CSS الخاص بي حتى يكون متوافقًا مع العديد من المتصفحات.

سأحاول أولاً إنشاء قائمة بدون جافا سكريبت، باستخدام CSS خالصًا بما في ذلك الاختراقات التي ذكرتها.ومن المرجح أن يحل مشكلتك.لا تحتاج فعليًا إلى Javascript لتغيير الأنماط عند تمرير الماوس وأشياء من هذا القبيل.

إذا كنت تريد التحقق من موضوع اختراق CSS:انقر هنا

إذا كنت تريد الاطلاع على بعض أمثلة قائمة CSS النقية:انقر هنا

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

Answer 4

وفق موضوع خرائط جوجل هذا, أنت على صواب - تم إدراج إطار IFrame بواسطة كود Google.

ستحتاج إلى استخدام الحل الذي ذكره دان،

قد ترغب في المحاولة هذا الحل في ccsplay.co.uk والذي يحل مشكلة ظهور القوائم أسفل القوائم المنسدلة

بدلا من ذلك، انظر اختراق/إصلاح Internet Explorer لعرض مربع التحديد من خلال DIV.

الحل الأساسي هو استخدام JavaScript لوضع قائمة CSS الخاصة بك في IFrame في IE6.

الحل البديل هو استخدام JavaScript لإخفاء خريطة Google عند سحب قائمة CSS للأسفل، أو استبدال خريطة Google بخريطة ثابتة (وربما حتى خريطة Google ثابتة) عند سحب قائمة CSS للأسفل.

Answer 5

ليس لدي إجابة فورية لك، ولكن الأدوات المذكورة في هذه الإجابة (وخاصة IE DOM Inspector) قد يساعد.