كيفية حل حدد التداخل علة في IE6?

Question

عند استخدام أي لا يمكن وضع المتمركزة على الاطلاق div على تحديد عنصر المدخلات.ذلك لأن تحديد عنصر تعتبر ActiveX كائن و هو على رأس كل عنصر HTML في الصفحة.

لقد رأيت الناس يختبئون يختار عند فتح المنبثقة div أن يؤدي إلى سيئة جدا تجربة المستخدم وجود ضوابط تختفي.

FogBugz كان في الواقع ذكية جدا الحل (قبل v6) تحول كل اختيار في مربعات النص عند منبثقة تم عرضها.هذا حل علة و خداع المستخدم العين ولكن السلوك لم يكن مثاليا.

حل آخر هو في FogBugz 6 حيث أنها لا تستخدم حدد العنصر مشفر في كل مكان.

اخر حل أنا استخدم حاليا هو لخبطة أي جعل المحرك و القوة أن تجعل المتمركزة على الاطلاق <div> كما ActiveX عنصر أيضا ضمان أنه يمكن أن يعيش أكثر من تحديد عنصر.ويتحقق ذلك من خلال وضع غير مرئية <iframe> داخل <div> و التصميم مع:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

هل لدى احدكم حلا أفضل من هذا ؟

تحرير:الغرض من هذا السؤال هو قدر بالمعلومات كما هو السؤال الحقيقي.أجد <iframe> خدعة أن يكون حلا جيدا, ولكن أنا لا تزال تبحث عن تحسين مثل إزالة هذا القبيح عديمة الفائدة الوسم أن يحط إمكانية الوصول.

Answer 1

أنا لا أعرف أي شيء أفضل من Iframe

ولكن يحدث لي أن هذا يمكن أن تضاف في شبيبة خلال البحث عن زوج من المتغيرات

1. IE 6
2. عالية Z-Index (كنت تميل إلى أن تعيين z-index لو كنت العائمة div أكثر)
3. مربع عنصر

ثم السيناريو الذي يبحث عن هذه البنود فقط إضافة iframe طبقة سيكون حل أنيق

بول

Answer 2

شكرا على iframe هاك الحل.انها قبيحة ولكن لا تزال أنيقة.:)

تعليق فقط.إذا كنت يحدث أن يتم تشغيل موقع الويب الخاص بك عبر SSL ، دمية iframe الوسم يحتاج إلى src تحديد خلاف ذلك IE6 هو الذهاب الى تقديم شكوى مع تحذير أمان.

على سبيل المثال:

    <iframe src="javascript:false;"></iframe>

لقد رأيت بعض الناس يوصي وضع src blank.html ...ولكن أنا أحب جافا سكريبت أكثر.يذهب الرقم.

Answer 3

بقدر ما أعرف أن هناك اثنين فقط من الخيارات أفضل مما هو مذكور استخدام iframe.والآخر هو يخفي كل يختار عند تراكب هو مبين ، مما يؤدي إلى أغرب تجربة المستخدم.

Answer 4

جرب هذا البرنامج المساعد http://docs.jquery.com/Plugins/bgiframe يجب أن تعمل!

الاستخدام: $('.your-dropdown-menu').bgiframe();

Answer 5

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

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

Answer 6

أنا أفعل نفس الشيء مع تحديد مربعات فلاش.

عند استخدام تراكب, إخفاء الكائنات الكامنة التي من شأنها أن تدفع من خلال.انها ليست كبيرة ، لكنه يعمل.يمكنك استخدام جافا سكريبت لإخفاء العناصر فقط قبل عرض تراكب, ثم تبين لهم مرة أخرى بمجرد الانتهاء من ذلك.

أحاول أن لا تعبث مع نوافذ الأطر المدمجة إلا إذا كان ذلك ضروريا.

خدعة باستخدام تسميات أو مربعات النص بدلا من حدد مربعات خلال تراكب هو أنيق.أنا قد تستخدم في المستقبل.

Answer 7

Mootools لديه بشكل جيد heshed الحل باستخدام iframe ، ودعا iframeshim.

لا يستحق بما في ذلك lib فقط من أجل هذا, ولكن إذا كان لديك في المشروع الخاص بك على أي حال ، يجب أن تكون على علم أن 'iframeshim' البرنامج المساعد موجود.

Answer 8

هناك بسيطة ومباشرة مسج البرنامج المساعد يسمى bgiframe.المطور قام بإنشائه لغرض حل هذه المسألة في ie6.

لقد استخدمت مؤخرا و يعمل مثل السحر.

Answer 9

عند إخفاء حدد عناصر إخفائها عن طريق تحديد "visibility:خفية" بدلا من العرض:لا شيء وإلا سيقوم المتصفح إعادة تدفق الوثيقة.

Answer 10

هذا ثابت عن طريق إخفاء حدد المكونات باستخدام CSS عندما حوار أو تراكب يتم عرض:

يختار[أنا].نمط.الرؤية = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}