Hoe om die Gekose oorvleuel fout in IE6 op te los?

StackOverflow https://stackoverflow.com/questions/7937

Vra

By die gebruik van Internet Explorer, jy kan nie 'n absoluut geposisioneer div sit oor 'n uitgesoekte insette element. Dit is omdat die kies element 'n ActiveX voorwerp beskou word en is op die top van elke HTML element in die bladsy.

Ek het reeds gesien mense wegkruip kies wanneer die opening van 'n pop-up div, wat lei tot baie sleg gebruikers ervaring met kontroles verdwyn.

FogBugz het eintlik 'n mooi slim oplossing (voor v6) van die draai elke kies in teks bokse wanneer 'n pop-up vertoon. Dit opgelos die fout en die bos gelei die gebruiker oog maar die gedrag was nie volmaak nie.

Nog 'n oplossing is in FogBugz 6 waar hulle nie meer gebruik die kies element en gehercodeerde dit oral.

Laaste oplossing ek tans gebruik word geknoei die IE rendering engine en dwing dit om die absoluut geposisioneer <div> as 'n ActiveX element te lewer, om te verseker dit kan oor leef 'n uitgesoekte element. Dit word bereik deur die plasing van 'n onsigbare <iframe> binne die <div> en stilering dit met: 

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

Is daar iemand het selfs 'n beter oplossing as hierdie een?

EDIT: Die doel van hierdie vraag is net soveel insiggewende want dit is 'n werklike vraag. Ek vind die <iframe> truuk om 'n goeie oplossing wees, maar ek is nog steeds op soek na verbetering soos die verwydering van hierdie lelike nutteloos tag wat afbreek toeganklikheid.

Was dit nuttig?

Oplossing

Ek het niks beter as 'n iframe weet

Maar dit nie plaasvind nie vir my dat dit kan bygevoeg word in JS deur te kyk vir 'n paar veranderlikes

  1. Internet Explorer 6
  2. 'n hoë Z-indeks (jy is geneig om te het 'n Z-indeks stel as jy swaai 'n div oor)
  3. 'n boks element

Toe 'n script wat lyk vir hierdie items en voeg net 'n iframe laag sou wees 'n netjiese oplossing

Paul

Ander wenke

Dankie vir die iframe hack oplossing. Dit is lelik en nog steeds elegant. :)

Net 'n opmerking. As jy toevallig jou webwerf te loop via SSL, die dummy iframe tag moet 'n src het gespesifiseer, anders IE6 gaan kla met 'n sekuriteit waarskuwing.

Byvoorbeeld: 

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

Ek het gesien sommige mense beveel opstel src om blank.html ... maar ek hou van die javascript manier meer. Gaan figuur.

Sover ek weet is daar slegs twee opsies, hoe beter waarvan die genoemde gebruik van 'n iframe. Die ander een is wegkruip al kies wanneer die oortrek is getoon, wat lei tot 'n selfs Weirder gebruikers ervaring.

Probeer hierdie plugin http://docs.jquery.com/Plugins/bgiframe , dit moet werk!

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

Ek dink nie daar is. Ek het probeer om hierdie probleem op te los by my werk. Wegsteek van die uitgesoekte beheer was die beste wat ons kan kom met ( 'n korporatiewe winkel met 'n gevange gehoor, gebruikers ervaring nie gewoonlik faktor in besluite die PM's).

Van wat ek aanlyn kan insamel wanneer jy soek na 'n oplossing, is daar net nie 'n goeie oplossing vir hierdie. Ek hou van die FogBugz oplossing (dieselfde ding gedoen deur 'n baie hoë-profiel webwerwe, soos Facebook), en dit is eintlik wat ek gebruik in my eie projekte.

Ek doen dieselfde ding met kies bokse en Flash.

By die gebruik van 'n overlay, verberg die onderliggende voorwerpe wat deur sou aandring. Dit is nie groot nie, maar dit werk. Jy kan JavaScript gebruik om die elemente weg te steek net voordat dit sal vertoon 'n overlay, hulle wys dan weer wanneer jy klaar is.

Ek probeer om nie te mors met iframes tensy dit absoluut noodsaaklik is.

Die geheim van die gebruik van etikette of teksbokse in plaas van kies bokse tydens overlays netjies. Ek kan gebruik wat in die toekoms.

Mootools het 'n baie goed heshed uit oplossing met behulp van 'n iframe, genoem iframeshim.

Nie die moeite werd insluitend die lib net vir hierdie, maar as jy dit in jou projek in elk geval, moet jy bewus wees dat die "iframeshim 'plugin bestaan.

Daar is hierdie eenvoudige en maklik jQuery plugin genoem bgiframe. Die ontwikkelaar het dit geskep met die uitsluitlike doel van die oplossing van hierdie probleem in IE6.

Ek het onlangs gebruik en dit werk soos 'n bom.

Wanneer die wegsteek van die uitgesoekte elemente vir hulle verberg deur die oprigting van die "sigbaarheid: weggesteek" in plaas van mekaar. Geeneen anders sal die leser sal weer vloei die dokument

Ek vaste die deur wegkruip die kies items met behulp van CSS wanneer 'n dialoog of overlay vertoon:

  

kies [i] .style.visibility = "verborge" 

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";
    }
}
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top