Rezolvați bug-ul de suprapunere selectat în IE6

Atunci când utilizați IE, nu puteți pune un div absolut poziționat peste un element de intrare de selectare. Acest lucru se datorează faptului că elementul select este considerat un obiect ActiveX și se află în partea de sus a fiecărui element HTML din pagină.

Am văzut deja persoane care ascund selectează când deschide o fereastră de tip pop-up, ceea ce duce la o experiență destul de proastă a utilizatorului, dispunând de controale.

FogBugz a avut de fapt o soluție destul de inteligentă (înainte de v6) de a transforma fiecare selecție în casete de text atunci când a fost afișat un pop-up. Acest lucru a rezolvat bug-ul și a păcălit ochiul utilizatorului, dar comportamentul nu a fost perfect.

O altă soluție este în FogBugz 6, unde nu mai utilizează elementul select și îl recodifică pretutindeni.

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
fr hi bn
poți schimba eticheta "internet-explorer" la o etichetă "ie6"? ar ajuta la clarificarea faptului că nu este o problemă în IE7, sau IE8.
adăugat autor scunliffe, sursa
Aceasta a fost rezolvată în IE7. Deci, cred adevărata întrebare este: Cum putem face ca oamenii să treacă de la IE6 la IE7 +?
adăugat autor ScottKoon, sursa
Uneori nu este posibil. Unul dintre clienții noștri ne obligă să susținem IE6 pentru angajații lor, care refuză să facă upgrade la IE7.
adăugat autor Dave Haynes, sursa
Ați putea face ca multe dintre site-urile noastre majore (norvegiene), și tocmai a declara război IE6. wired.com/epicenter/2009/02/norwegian-websi
adăugat autor Daniel Bruce, sursa

9 răspunsuri

Fac același lucru cu casetele selectate și Flash.

Atunci când utilizați o suprapunere, ascundeți obiectele care stau la baza care ar împinge. Nu e grozav, dar funcționează. Puteți utiliza JavaScript pentru a ascunde elementele chiar înainte de a afișa o suprapunere, apoi le afișați din nou după ce ați terminat.

Încerc să nu mizeresc dacă nu este absolut necesar.

Trucul de a folosi etichete sau casete de text în loc de casete selectate în timpul suprapunerilor este îngrijit. Pot folosi asta în viitor.

0
adăugat

Din câte știu, există doar două opțiuni, cu atât mai bine este utilizarea menționată a unui iframe. Celălalt ascunde toate selecțiile când se afișează suprapunerea, ceea ce duce la o experiență de utilizare mai obositoare.

0
adăugat

Nu știu nimic mai bine decât o Iframe

Dar mi se pare că acest lucru ar putea fi adăugat în JS căutând câteva variabile

  1. IE 6
  2. Un indice Z ridicat (tendința de a seta un z-index dacă plutiți peste div)
  3. Un element cutie

Apoi, un script care caută aceste elemente și doar adaugă un layer iframe ar fi o soluție potrivită

Paul

0
adăugat
corect, aceasta este cea mai bună metodă, toate comenzile ferestre din IE 5.5 și 6.0 au index z mai mare decât orice pe pagină, prin urmare, puteți acoperi doar un astfel de control cu ​​altul. Iframe este cea mai bună opțiune deoarece poate fi transparentă. dotnetjunkies.com/WebLog/jking/archive/category/28.aspx
adăugat autor Vitaly Sharovatov, sursa
și s-ar putea să existe și probleme cu SRC a iframe-ului, vă rugăm să aruncați o privire aici: weblogs.asp.net/bleroy/archive/2005/08/09/…
adăugat autor Vitaly Sharovatov, sursa

Am rezolvat această problemă ascunzând componentele selectate folosind CSS când se afișează un dialog sau o suprapunere:

selectează [i] .style.visibility = "ascuns";

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
adăugat

Mootools are o solutie destul de bine eliminata folosind o iframe, numita iframeshim.

Nu merită să includeți lib doar pentru acest lucru, dar dacă îl aveți în proiectul dvs. oricum, ar trebui să știți că pluginul "iframeshim" există.

0
adăugat

Nu cred că există. Am încercat să rezolv această problemă la serviciul meu. Ascunderea controlului selectat a fost cel mai bun pe care am putut să-l vină (fiind un magazin corporativ cu un auditoriu captiv, experiența utilizatorului nu este, de obicei, factor în deciziile premierului).

Din ceea ce puteam aduna online când căutam o soluție, nu există nici o soluție bună la acest lucru. Îmi place soluția FogBugz (același lucru făcut de o mulțime de site-uri de înaltă calitate, cum ar fi Facebook), iar acesta este de fapt ceea ce folosesc în proiectele mele.

0
adăugat

Există un plugin simplu și simplu de jQuery numit bgiframe. Dezvoltatorul a creat-o cu singurul scop de a rezolva această problemă în 6.

Am folosit recent și funcționează ca un farmec.

0
adăugat

încercați acest plugin http://docs.jquery.com/Plugins/bgiframe , ar trebui să funcționeze!

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

0
adăugat

Când ascundeți elementele selectate, le ascundeți prin setarea "vizibilității: ascunse" în loc de afișare: în caz contrar, browserul va relua documentul.

0
adăugat