आईई 6 में चयन ओवरलैप बग हल करें

IE का उपयोग करते समय, आप एक चयनित इनपुट तत्व पर एक बिल्कुल स्थानांतरित div नहीं डाल सकते हैं। ऐसा इसलिए है क्योंकि चयन तत्व को ActiveX ऑब्जेक्ट माना जाता है और पृष्ठ में प्रत्येक HTML तत्व के शीर्ष पर होता है।

मैंने पहले से ही पॉपअप div खोलते समय चुनने वाले लोगों को छुपाया है, जिससे नियंत्रण खराब होने वाले बहुत खराब उपयोगकर्ता अनुभव की ओर जाता है।

पॉपअप प्रदर्शित होने पर फॉगबगज़ वास्तव में टेक्स्ट बॉक्स में प्रत्येक चयन को मोड़ने का एक बहुत ही स्मार्ट समाधान (v6 से पहले) था। इसने बग को हल किया और उपयोगकर्ता की आंखों को धोखा दिया लेकिन व्यवहार सही नहीं था।

एक और समाधान फोगबगज़ 6 में है जहां वे अब चयनित तत्व का उपयोग नहीं करते हैं और इसे हर जगह रिकोड करते हैं।

Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:

#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;
}

Does anyone have an even better solution than this one?

EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.

0
ro fr bn
क्या आप "इंटरनेट एक्सप्लोरर" टैग को "यानी 6" टैग में बदल सकते हैं? यह स्पष्ट करने में मदद करेगा कि यह आईई 7, या आईई 8 में कोई मुद्दा नहीं है।
जोड़ा लेखक scunliffe, स्रोत
यह आईई 7 में तय किया गया है। तो मुझे लगता है असली सवाल यह है कि: हम लोगों को आईई 6 से आईई 7 + में अपग्रेड कैसे कर सकते हैं?
जोड़ा लेखक ScottKoon, स्रोत
कभी-कभी यह संभव नहीं है। हमारे ग्राहकों में से एक हमें अपने कर्मचारियों के लिए आईई 6 का समर्थन करने के लिए मजबूर करता है, जिन्होंने आईई 7 में अपग्रेड करने से इनकार कर दिया है।
जोड़ा लेखक Dave Haynes, स्रोत
आप हमारी कई (नॉर्वे की) प्रमुख वेबसाइटों की तरह कर सकते हैं, और केवल आईई 6 पर युद्ध घोषित कर सकते हैं। wired.com/epicenter/2009/02/norwegian-websi
जोड़ा लेखक Daniel Bruce, स्रोत

9 उत्तर

मैं चुनिंदा बक्से और फ्लैश के साथ एक ही काम करता हूं।

ओवरले का उपयोग करते समय, अंतर्निहित वस्तुओं को छिपाएं जो आगे बढ़ेंगे। यह बहुत अच्छा नहीं है, लेकिन यह काम करता है। आप ओवरले को प्रदर्शित करने से पहले तत्वों को छिपाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, फिर एक बार पूरा होने के बाद उन्हें फिर से दिखाएं।

मैं iframes के साथ गड़बड़ न करने की कोशिश नहीं करता जब तक कि यह बिल्कुल जरूरी नहीं है।

ओवरले के दौरान चुनिंदा बक्से के बजाय लेबल या टेक्स्टबॉक्स का उपयोग करने की चाल साफ है। मैं भविष्य में इसका उपयोग कर सकता हूं।

0
जोड़ा

जहां तक ​​मुझे पता है कि केवल दो विकल्प हैं, जिनमें से बेहतर आईफ्रेम का उल्लेख किया गया उपयोग है। दूसरा ओवरले दिखाए जाने पर सभी चयन छुपा रहा है, जिससे एक वीरडर उपयोगकर्ता अनुभव भी होता है।

0
जोड़ा

मैं इफ्रेम से बेहतर कुछ नहीं जानता

लेकिन यह मेरे लिए होता है कि इसे दो चरों की तलाश करके जेएस में जोड़ा जा सकता है

  1. आईई 6
  2. एक उच्च जेड-इंडेक्स (यदि आप एक div को फ़्लोट कर रहे हैं तो आपको ज़ेड-इंडेक्स सेट करना होगा)
  3. एक बॉक्स तत्व

फिर एक स्क्रिप्ट जो इन वस्तुओं को देखती है और सिर्फ एक आईफ्रेम परत जोड़ती है, वह एक साफ समाधान होगा

पॉल

0
जोड़ा
सही, यह सबसे अच्छा तरीका है, आईई 5.5 और 6.0 में सभी खिड़की वाले नियंत्रण पृष्ठ पर किसी भी चीज़ की तुलना में उच्च जेड-इंडेक्स हैं, इसलिए आप केवल एक ऐसे नियंत्रण को दूसरे के साथ कवर कर सकते हैं। Iframe सबसे अच्छा विकल्प है क्योंकि यह पारदर्शी हो सकता है। dotnetjunkies.com/WebLog/jking/archive/category/28.aspx
जोड़ा लेखक Vitaly Sharovatov, स्रोत
और आईफ्रेम के एसआरसी के साथ भी समस्याएं हो सकती हैं, कृपया यहां एक नज़र डालें: weblogs.asp.net/bleroy/archive/2005/08/09/…
जोड़ा लेखक Vitaly Sharovatov, स्रोत

जब कोई संवाद या ओवरले प्रदर्शित होता है तो मैंने सीएसएस का उपयोग करके चुनिंदा घटकों को छुपाकर इसे ठीक किया:

चुनता है [i] .style.visibility = "छुपा";

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";
    }
}
0
जोड़ा

Mootools एक iframe का उपयोग कर एक बहुत अच्छी तरह से हिचकिचा हुआ समाधान है, जिसे iframeshim कहा जाता है।

इसके लिए lib सहित लायक नहीं है, लेकिन यदि आपके पास अपनी परियोजना में वैसे भी है, तो आपको अवगत होना चाहिए कि 'iframeshim' प्लगइन मौजूद है।

0
जोड़ा

मुझे नहीं लगता कि वहाँ है। मैंने अपनी नौकरी पर इस समस्या को हल करने की कोशिश की है। चुनिंदा नियंत्रण को छिपाना सबसे अच्छा था जिसके साथ हम आ सकते थे (कैप्टिव ऑडियंस के साथ कॉरपोरेट शॉप होने के नाते, उपयोगकर्ता अनुभव आमतौर पर पीएम के निर्णयों में कारक नहीं होता)।

समाधान की तलाश करते समय मैं ऑनलाइन एकत्र कर सकता था, इसके लिए कोई अच्छा समाधान नहीं है। मुझे फोगबगज़ समाधान पसंद है (फेसबुक जैसी कई उच्च प्रोफ़ाइल साइटों द्वारा की गई एक ही चीज़), और यह वास्तव में मैं अपनी परियोजनाओं में उपयोग करता हूं।

0
जोड़ा

Bgiframe नामक यह सरल और सीधा ज्वेलरी प्लगइन है। डेवलपर ने इस मुद्दे को यानी 6 में हल करने के एकमात्र उद्देश्य के लिए बनाया है।

मैंने हाल ही में उपयोग किया है और यह एक आकर्षण की तरह काम करता है।

0
जोड़ा

इस प्लगइन को http://docs.jquery.com/Plugins/bgiframe आज़माएं, इसे काम करना चाहिए!

usage: $('.your-dropdown-menu').bgiframe();

0
जोड़ा

चयन तत्वों को छिपाने पर उन्हें प्रदर्शित करने के बजाय "दृश्यता: छुपा" सेट करके उन्हें छुपाएं: अन्यथा ब्राउज़र दस्तावेज़ को पुन: प्रवाह नहीं करेगा।

0
जोड़ा