IE7 Z-Index Layering Issues

163

Saya telah mengisolasi sedikit uji z-indexbug IE7 , tetapi tidak tahu bagaimana cara memperbaikinya. Saya telah bermain dengan z-indexsepanjang hari.

Apa yang salah dengan z-indexIE7?

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

Tes HTML:

<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
sumber
Jika Anda mencari pekerjaan di sekitar dan Anda tidak mengatur ulang semua html Anda dengan baik dalam beberapa konteks tumpukan coba ini: brenelz.com/blog/squish-the-internet-explorer-z-index-bug
Nasaralla

Jawaban:

268

Z-index bukanlah pengukuran absolut. Dimungkinkan untuk elemen dengan indeks-z: 1000 berada di belakang elemen dengan indeks-z: 1 - selama masing-masing elemen memiliki konteks penumpukan yang berbeda .

Saat Anda menentukan indeks-z, Anda menentukannya relatif terhadap elemen lain dalam konteks susun yang sama, dan meskipun paragraf spesifikasi CSS pada indeks-Z mengatakan bahwa konteks susun baru hanya dibuat untuk konten yang diposisikan dengan indeks-z selain otomatis (artinya seluruh dokumen Anda harus menjadi satu konteks penumpukan), Anda memang membangun rentang yang diposisikan: sayangnya IE7 menginterpretasikan konten yang diposisikan tanpa z-indeks ini sebagai konteks susun baru.

Singkatnya, coba tambahkan CSS ini:

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

atau mendesain ulang dokumen sedemikian rupa sehingga rentang Anda tidak memiliki posisi: relatif lebih lama:

<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>

Lihat http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ untuk contoh serupa dari bug ini. Alasan pemberian elemen induk (amplop-1 dalam contoh Anda) indeks-z yang lebih tinggi berfungsi karena semua anak amplop-1 (termasuk menu) akan tumpang tindih dengan semua saudara kandung amplop-1 (khususnya, amplop-2).

Meskipun z-index memungkinkan Anda mendefinisikan secara eksplisit bagaimana hal-hal saling tumpang tindih, bahkan tanpa indeks-z, urutan peletakannya didefinisikan dengan baik . Akhirnya, IE6 memiliki bug tambahan yang menyebabkan kotak pilih dan iframe melayang di atas segalanya.

Eamon Nerbonne
sumber
4
akhirnya menyelesaikannya :) - posisi relatif benar-benar anoying jadi saya entah bagaimana mengadopsi ide Anda tanpa elemen 'amplop' - tampaknya untuk menyelesaikan masalah dan juga untuk bekerja - hanya perlu mendesain ulang sedikit kode untuk kotak saran - thx a lot
rezna
6
Ada tiga hal berbeda yang mempengaruhi bagaimana elemen saling tumpang tindih: konteks susun, urutan sumber, dan urutan lukisan. Masalah yang paling jelas muncul ketika berhadapan dengan konteks penumpukan - mengetahui dua lainnya akan membantu Anda mengetahui gotcha yang lebih esoteris. Sumber: CSS-Diskusikan Wiki.
rjb
2
menambahkan indeks-z ke elemen induk adalah solusi yang bagus
Danyun Liu
2
Aku cinta kamu. Posisi yang ditambahkan: relatif dan indeks-z: 500 ke orang tua saya dan memperbaikinya!
Aymeric Gaurat-Apelli
2
Saya membuat masalah dengan komentar yang menunjukkan solusinya. 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
sumber
setelah membaca solusi "benar" di atas, saya mencoba merumuskan solusi untuk masalah saya yang jauh lebih kompleks daripada yang sepele dalam pertanyaan. kemudian saya melemparkan jawaban ini dan itu berfungsi seperti pesona. jika solusi di atas adalah yang benar, ini tentu yang mudah. Terima kasih!
Landon
11

Dalam IE, elemen yang diposisikan menghasilkan konteks susun baru, dimulai dengan nilai z-indeks 0. Oleh karena itu z-indeks tidak berfungsi dengan benar.

Coba beri elemen induk nilai indeks z yang lebih tinggi (bisa lebih tinggi dari nilai indeks z anak itu sendiri) untuk memperbaiki bug.

ed1nh0
sumber
1
Terima kasih. Solusi ini berhasil bagi saya dengan memberikan indeks-z wadah induk, tidak harus lebih tinggi dari indeks-z anak.
neelmeg
4

Saya mengalami masalah ini, tetapi pada proyek besar di mana perubahan HTML harus diminta dan menjadi masalah keseluruhan, jadi saya mencari solusi css murni.

Dengan menempatkan position:relative; z-index:-1konten tubuh utama saya, konten drop-down header saya tiba-tiba ditampilkan di atas konten tubuh di ie7 (itu sudah ditampilkan tanpa masalah di semua browser lain dan di ie8 +)

Masalah dengan itu maka ini menonaktifkan semua tindakan hover dan klik pada semua konten dalam elemen dengan z-index:-1jadi saya pergi ke elemen induk dari seluruh halaman dan memberikannyaposition:relative; z-index:1

Yang memperbaiki masalah dan mempertahankan fungsi layering yang benar.

Terasa sedikit gila, tetapi bekerja sesuai kebutuhan.

lukeroxout
sumber
3

Saya menemukan bahwa saya harus menempatkan penunjukan z-index khusus pada div dalam lembaran styel spesifik ie7:

div {z-index: 10; }

Untuk indeks-z dari div yang tidak terkait, seperti nav, ditampilkan di atas slider. Saya tidak bisa begitu saja menambahkan indeks-z ke slider slider itu sendiri.

Solusi eBar
sumber
Saya menemukan bahwa ini selain html {z-index:1; position:relative;}memungkinkan menu untuk melihat gambar korsel di IE.
bassplayer7
2

Jika pengindeksan z yang lebih tinggi yang disebutkan sebelumnya dalam node induk tidak akan sesuai dengan kebutuhan Anda, Anda dapat membuat solusi alternatif dan menargetkannya ke browser bermasalah baik dengan komentar bersyarat IE atau menggunakan deteksi fitur (lebih idealistik) yang disediakan oleh Modernizr.

Tes cepat (dan jelas berfungsi) untuk 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;
});
bulat
sumber
Sangat bagus! Deteksi fitur jelas merupakan cara yang harus dilakukan.
Jason
1

Sepertinya bukan bug yaitu, hanya untuk pemahaman yang berbeda dengan standar css. Jika wadah luar tidak ditentukan indeks-z, tetapi elemen dalam ditentukan indeks-z yang lebih tinggi. Jadi saudara kontainer mungkin melapisi elemen indeks-z tinggi. Sekalipun seperti itu, itu hanya terjadi di IE7, tetapi IE6, IE8 dan Firefox tidak masalah.

c2j
sumber
0

Pada IE6 secara umum, elemen UI tertentu diimplementasikan dengan kontrol asli. Kontrol ini diberikan dalam fase yang sepenuhnya terpisah (jendela?) Dan selalu muncul di atas kontrol lain, terlepas dari indeks-z. Kotak-pilih adalah kontrol bermasalah lainnya.

Satu-satunya cara untuk mengatasi masalah ini adalah dengan membuat konten yang dirender oleh IE sebagai "jendela" yang terpisah - yaitu Anda dapat menempatkan kotak pilih di atas kotak teks, atau, lebih berguna, iframe.

Singkatnya, Anda harus meletakkan "on-hover" seperti hal-hal seperti menu di iframe untuk membiarkan IE menempatkan kontrol UI bawaan di atas.

Ini seharusnya diperbaiki di IE7 (lihat http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) tetapi mungkin Anda menjalankan dalam beberapa jenis mode kompatibilitas?

Eamon Nerbonne
sumber
saya tahu tentang IE6 z-index bug - dan ini sudah diperbaiki - tapi ada masalah lain dengan relatif / benar-benar memposisikan elemen / input di IE7 (yang diperbaiki di IE8) - saya menemukan beberapa solusi (bermain dengan z-indeces), tetapi tak satu pun dari mereka bekerja untuk - itu sebabnya saya bertanya di sana ... Pokoknya thx untuk jawabannya.
rezna
0

Bug ini tampaknya merupakan masalah yang terpisah dari konteks standar IE stacking stack yang terpisah. Saya punya masalah serupa dengan beberapa input yang ditumpuk (pada dasarnya sebuah tabel dengan pelengkapan otomatis di setiap baris). Satu-satunya solusi yang saya temukan adalah memberikan setiap sel nilai indeks-z yang menurun.

Jeremy Kauffman
sumber
0

Jika Anda ingin membuat menu tarik-turun dan memiliki masalah dengan z-index, Anda dapat menyelesaikannya dengan membuat z-index dengan nilai yang sama (z-index: 999; misalnya) .. Cukup masukkan z-index di div induk dan anak dan itu akan memecahkan masalah. Saya memecahkan masalah dengan itu. Jika saya meletakkan indeks-z yang berbeda, tentu, itu akan menampilkan div anak saya di atas div orangtua saya, tetapi, begitu saya ingin memindahkan mouse saya dari tab menu ke div sub-menu (daftar dropdown), itu menghilang ... lalu saya meletakkan indeks-z dengan nilai yang sama dan menyelesaikan masalah ..

Marko
sumber
0

Saya menyelesaikannya dengan menggunakan alat pengembang untuk IE7 (dengan bilah alat) dan menambahkan z-index negatif ke wadah div yang akan di bawah div lainnya.

Lucas
sumber