Problemi di stratificazione dell'Indice Z IE7

163

Ho isolato un piccolo caso di test del z-indexbug di IE7 , ma non so come risolverlo. Ho giocato z-indextutto il giorno.

Cosa c'è di sbagliato z-indexin IE7?

Test CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

HTML di prova:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

css internet-explorer-7 z-index

— rezna
fonte

Se stai cercando un lavoro in giro e non riorganizzi tutto il tuo html in modo che si trovi in un contesto di stack, prova questo: brenelz.com/blog/squish-the-internet-explorer-z-index-bug

— Nasaralla

268

L'indice Z non è una misura assoluta. È possibile che un elemento con indice z: 1000 sia dietro un elemento con indice z: 1 - purché i rispettivi elementi appartengano a contesti di impilamento diversi .

Quando specifichi z-index, lo specifichi relativamente ad altri elementi nello stesso contesto di impilamento e sebbene il paragrafo della specifica CSS su Z-index affermi che un nuovo contesto di impilamento viene creato solo per contenuti posizionati con un z-index diverso da auto (che significa l'intero documento dovrebbe essere un unico contesto di stratificazione), è fatto costruire un arco posizionato: purtroppo IE7 interpreta il contenuto posizionato senza z-index questo come un nuovo contesto di stratificazione.

In breve, prova ad aggiungere questo CSS:

#envelope-1 {position:relative; z-index:1;}

o riprogettare il documento in modo tale che i tuoi span non abbiano più posizione: relativo:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Vedi http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ per un esempio simile di questo bug. La ragione per cui un elemento genitore (busta-1 nel tuo esempio) funziona con un indice z superiore è perché tutti i figli di busta-1 (incluso il menu) si sovrapporranno a tutti i fratelli di busta-1 (in particolare, busta-2).

Sebbene z-index ti consenta di definire esplicitamente come le cose si sovrappongono, anche senza z-index l'ordine di stratificazione è ben definito . Infine, IE6 ha un bug aggiuntivo che fa sì che le caselle di selezione e gli iframe galleggino sopra tutto il resto.

— Eamon Nerbonne
fonte

4

finalmente risolto :) - la posizione relativa è davvero in agguato, quindi in qualche modo ho adottato la tua idea senza gli elementi 'inviluppo' - sembra risolvere il problema e anche funzionare - devo solo ridisegnare un po 'il codice per suggerire box - grazie a lotto

— rezna,

6

Esistono tre cose diverse che influiscono sul modo in cui gli elementi si sovrappongono: impilare contesti, ordine di origine e ordine di pittura. I problemi più ovvi sorgono quando si affrontano i contesti di impilamento : conoscere gli altri due ti aiuterà a capire i gotcha più esoterici. Fonte: CSS-Discuss Wiki.

— rjb,

2

aggiungere lo z-index all'elemento genitore è una soluzione meravigliosa

— Danyun Liu,

2

Ti amo. Aggiunta posizione: relativo e indice z: 500 al mio genitore e risolto!

— Aymeric Gaurat-Apelli il

2

Ho risolto questo problema con commenti che dimostrano la soluzione. jsfiddle.net/fNcGu/3

— Christopher Johnson

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

— nixis
fonte

dopo aver letto la soluzione "corretta" sopra, ho cercato di formulare una soluzione per il mio problema considerevolmente più complesso di quella banale nella domanda. poi ho inserito questa risposta e ha funzionato come un incantesimo. se la soluzione sopra è quella corretta, questa è sicuramente quella facile. Grazie!

— Landon,

11

In IE gli elementi posizionati generano un nuovo contesto di stacking, iniziando con un valore z-index pari a 0. Pertanto z-index non funziona correttamente.

Prova a dare all'elemento genitore un valore z-index più alto (può essere persino più alto del valore z-index del bambino stesso) per correggere il bug.

— ed1nh0
fonte

1

Grazie. Questa soluzione ha funzionato per me fornendo un indice z del contenitore padre, non necessariamente superiore all'indice z del bambino.

— Neelmeg,

4

Ho riscontrato questo problema, ma su un grande progetto in cui è stato necessario richiedere modifiche HTML e diventare un problema completo, quindi stavo cercando una soluzione CSS pura.

Posizionando position:relative; z-index:-1 il contenuto del mio corpo principale la mia intestazione a discesa mostrava improvvisamente il contenuto sopra il contenuto del corpo in ie7 (era già visualizzato senza problemi in tutti gli altri browser e in ie8 +)

Il problema era che questo disabilitava tutte le azioni hover e click su tutto il contenuto nell'elemento con il z-index:-1 quindi sono andato all'elemento principale dell'intera pagina e gli ho dato unposition:relative; z-index:1

Ciò ha risolto il problema e mantenuto la corretta funzionalità di stratificazione.

Sembra un po 'confuso, ma ha funzionato come richiesto.

— lukeroxout
fonte

3

Ho scoperto che dovevo posizionare una speciale designazione z-index su div in un foglio di stile specifico ie7:

div {indice z: 10; }

Per l'indice z di div non correlati, come ad esempio un nav, da mostrare sopra il cursore. Non potrei semplicemente aggiungere un indice z al div div slider stesso.

— Soluzioni eBar
fonte

Ho scoperto che questo oltre a html {z-index:1; position:relative;}consentire al menu di andare oltre l'immagine del carosello su IE.

— bassplayer7,

2

Se l'indicizzazione z superiore precedentemente menzionata nei nodi padre non soddisfa le tue esigenze, puoi creare una soluzione alternativa e indirizzarla a browser problematici tramite commenti condizionali di IE o utilizzando il rilevamento (più idealistico) delle funzionalità fornito da Modernizr.

Test rapido (e ovviamente funzionante) per Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

— sferoide
fonte

Molto bella! Il rilevamento delle funzionalità è sicuramente la strada da percorrere.

— Jason,

1

Sembra non un bug, solo per una diversa comprensione dello standard CSS. Se il contenitore esterno non è specificato l'indice z, ma l'elemento interno ha specificato un indice z più alto. Quindi il fratello del contenitore potrebbe sovrapporre l'elemento high z-index. Anche se così, si verifica solo in IE7, ma IE6, IE8 e Firefox sono ok.

— c2j
fonte

0

In IE6 in generale, alcuni elementi dell'interfaccia utente sono implementati con controlli nativi. Questi controlli sono resi in una fase completamente separata (finestra?) E appaiono sempre sopra qualsiasi altro controllo, indipendentemente dall'indice z. Le caselle di selezione sono un altro controllo così problematico.

L'unico modo per aggirare questo problema è costruire il contenuto che IE visualizza come una "finestra" separata, ovvero è possibile posizionare una casella di selezione su una casella di testo o, più utile, un iframe.

In breve, dovrai mettere "al passaggio del mouse" come cose come i menu in un iframe per consentire a IE di posizionare questi controlli dell'interfaccia utente incorporati sopra.

Questo avrebbe dovuto essere risolto in IE7 (vedi http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) ma forse stai utilizzando una modalità di compatibilità?

— Eamon Nerbonne
fonte

conosco il bug di IE6 z-index - e questo è stato risolto - ma c'è un altro problema con gli elementi / input relativamente / assolutamente posizionati in IE7 (che è stato risolto in IE8) - ho trovato un paio di soluzioni (giocare con gli z-indeces), ma nessuno di loro ha funzionato per questo - ecco perché lo sto chiedendo ... Comunque grazie per la risposta.

— Rezna,

0

Questo bug sembra essere in qualche modo un problema separato rispetto al bug IE del contesto di stacking separato standard. Ho avuto un problema simile con più input impilati (essenzialmente una tabella con un completatore automatico in ogni riga). L'unica soluzione che ho trovato è stata quella di dare a ogni cella un valore z-index decrescente.

— Jeremy Kauffman
fonte

0

Se vuoi creare un menu a discesa e avere un problema con z-index, puoi risolverlo creando z-index dello stesso valore (z-index: 999; per esempio) .. Basta inserire z-index in div genitori e figli e questo risolverà il problema. Risolvo il problema con quello. Se inserisco diversi z-index, sicuramente mostrerà il div del mio bambino sul div del mio genitore, ma, una volta che voglio spostare il mouse dalla scheda del menu al div del sottomenu (elenco a discesa), scompare ... quindi ho inserito gli z-index dello stesso valore e ho risolto il problema.

— Marko
fonte

0

L'ho risolto utilizzando gli strumenti di sviluppo per IE7 (è una barra degli strumenti) e aggiungendo un indice z negativo al contenitore del div che sarà al di sotto dell'altro div.

— Lucas
fonte