Mengapa Pesanan Susun Div Saya Berkelakuan Berbeza dalam IE6 dan 7?

Internet Explorer 6 dan 7 Z-Index Isu

Masalah:
Dalam halaman web dengan dua divs, div#sign-post sepatutnya muncul di atas div#bottom, tetapi ini hanya berlaku dalam pelayar selain Internet Explorer (IE) 6 dan 7. Selain itu, IE6 memaparkan tambahan 198 piksel di bahagian atas div#bottom.

Penyelesaian:

Memahami Indeks Z dalam IE6/7

Dalam kebanyakan penyemak imbas, sifat z-index membenarkan elemen untuk disusun di atas atau di bawah yang lain berdasarkan nilai yang ditetapkan. Walau bagaimanapun, dalam IE6 dan 7, elemen diposisikan mencipta konteks tindanan baharu tanpa mengira nilai indeks-z.

Masalahnya

Dalam kes ini, div#sign-post mempunyai z-indeks yang lebih tinggi daripada div#bottom, tetapi IE6/7 membandingkan konteks tindanan ibu bapa mereka, yang dalam IE dicipta oleh elemen kedudukan itu sendiri. Oleh kerana div#sign-post mahupun div#bottom tidak menetapkan nilai indeks z secara eksplisit, susunan dokumen menentukan susunannya, menyebabkan div#bottom muncul di atas.

Penyelesaian:

Untuk menyelesaikan isu ini, nilai indeks-z perlu diberikan kepada nenek moyang yang terjejas elemen.

1. Kenal pasti nenek moyang diposisikan yang mencipta konteks tindanan.
2. Gunakan JavaScript atau CSS untuk menetapkan z-indeks yang tinggi kepada nenek moyang ini, memaksa susunan susun yang diingini.

Sebagai contoh, jika div#parent mengandungi div#sign-post, tetapkan indeks-z sebanyak 1000 ke div#parent untuk meletakkannya di atas div#bottom.

Isu IE6 Tambahan

Tambahan 198 piksel di bahagian atas div#bottom dalam IE6 adalah disebabkan oleh pengiraan dalaman margin lalainya. Isu ini boleh diselesaikan dengan menetapkan margin div#bottom secara eksplisit kepada 0px.

Atas ialah kandungan terperinci Mengapa Pesanan Susun Div Saya Berkelakuan Berbeza dalam IE6 dan 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!