IE7 Z-Endeksi Katmanlama Sorunları

163

Ben IE7 z-indexhata küçük bir test durumda izole ettik , ama nasıl düzeltileceğini bilmiyorum. z-indexGün boyu oynuyorum .

z-indexIE7'de sorun nedir ?

Test CSS'si:

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

Test HTML'si:

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

Etrafında bir iş arıyorsanız ve tüm html'nizi

— Nasaralla

268

Z-endeksi mutlak bir ölçüm değildir. Z-endeksi: 1000 olan bir elemanın, z-endeksi: 1 olan bir elemanın arkasında olması mümkündür - ilgili elemanlar farklı istifleme bağlamlarına ait olduğu sürece .

Z-endeksini belirttiğinizde, bunu aynı yığın bağlamındaki diğer öğelere göre belirtirsiniz ve CSS spesifikasyonunun Z-endeksindeki paragrafında yeni bir yığın içeriği yalnızca z-endeksi dışındaki bir konumlandırılmış içerik için oluşturulmuş olsa da oto , siz (tüm belge anlam tek yığın bağlamı olmalıdır) yaptığımız maalesef IE7 yorumlayıp konumlandırılmış içeriği z dizini olmadan bu gibi yeni bir yığın bağlamı: bir konumlandırılmış yayılma inşa.

Kısacası, bu CSS'yi eklemeyi deneyin:

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

veya dokümanı, açıklıklarınızın pozisyon: artık göreceli olmayacağı şekilde yeniden tasarlayın:

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

Bu hatanın benzer bir örneği için bkz. Http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ . Bir üst öğeye (örneğin zarf-1) daha yüksek bir z-endeksi vermenin nedeni, zarf-1'in (menü dahil) tüm alt öğelerinin zarf-1'in tüm kardeşleriyle (özellikle zarf-2) üst üste gelmesidir.

Her ne kadar z-endeksi, z-endeksi olmasa bile, katmanların sıralaması iyi tanımlanmış olsa da , işlerin nasıl üst üste geldiğini açıkça tanımlamanıza izin verir . Son olarak, IE6, diğer her şeyin üstünde seçim kutularının ve iframe'lerin yüzmesine neden olan ek bir hataya sahiptir.

— Eamon Nerbonne
kaynak

4

nihayet çözüldü :) - göreceli pozisyon gerçekten anoying, bu yüzden bir şekilde 'zarf' öğeleri olmadan fikrinizi benimsedi - sorunu çözmek ve aynı zamanda çalışmak gibi görünüyor - sadece önermek için biraz kod yeniden tasarlamak zorunda - thx a çok

— rezna

6

Öğelerin birbiriyle örtüşmesini etkileyen üç farklı şey vardır: yığın bağlamları, kaynak sırası ve boyama sırası. En belirgin sorunlar, istifleme bağlamlarıyla uğraşırken ortaya çıkar - diğer ikisini bilmek, daha ezoterik gotchaları anlamanıza yardımcı olacaktır. Kaynak: CSS-Tartışma Wiki.

— rjb

2

ana öğeye z-endeksini eklemek harika bir çözüm

— Danyun Liu

2

Seni seviyorum. Ebeveynime pozisyon: göreceli ve z-endeksi: 500 eklendi ve düzeltildi!

— Aymeric Gaurat-Apelli

2

Çözümü gösteren yorumlarla bu sorunu çözdüm. 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
kaynak

Yukarıdaki "doğru" çözümü okuduktan sonra, sorudaki önemsiz sorundan çok daha karmaşık sorunum için bir çözüm formüle etmeye çalıştım. sonra bu cevabı attım ve bir cazibe gibi çalıştı. yukarıdaki çözüm doğru çözümse, bu kesinlikle kolay çözümdür. Teşekkürler!

— Landon

11

IE'de konumlandırılmış öğeler, 0'lık bir z-endeksi değeriyle başlayarak yeni bir yığın içeriği oluşturur. Bu nedenle, z-endeksi düzgün çalışmaz.

Hatayı düzeltmek için üst öğeye daha yüksek bir z-endeksi değeri (çocuğun z-endeksi değerinden bile daha yüksek olabilir) vermeyi deneyin.

— ed1nh0
kaynak

1

Teşekkürler. Bu çözüm, çocuğun kapsayıcısından daha yüksek olması gerekmeyen ana kabın bir z-endeksini vererek benim için çalıştı.

— neelmeg

4

Bu sorunla karşılaştım, ancak HTML değişikliklerinin talep edilmesi ve bir sorun haline gelmesi gereken büyük bir projede, bu yüzden saf bir css çözümü arıyordum.

position:relative; z-index:-1Ana gövde içeriğimi yerleştirerek üstbilgim açılır içeriğinin aniden gövde içeriğinin üzerinde ie7'de görüntülenmesi (diğer tüm tarayıcılarda ve ie8 + 'da zaten sorunsuz bir şekilde görüntüleniyordu)

Bu sorun o zaman bu tüm vurgulu tüm öğenin z-index:-1üst öğeye gitti ve öğenin tüm içeriği üzerinde tüm hover ve tıklama eylemleri devre dışı bırakıldı ve birposition:relative; z-index:1

Bu da sorunu çözdü ve doğru katman işlevselliğini korudu.

Biraz acayip hissediyor, ancak gerektiği gibi çalıştı.

— lukeroxout
kaynak

3

Ben ie7 özgü bir styelsheet div özel bir z-endeksi atama gerektiğini buldum:

div {z-endeksi: 10; }

Gezinme gibi alakasız div'lerin z-endeksinin kaydırıcının üzerinde gösterilmesi için. Ben sadece kaydırıcı div kendisine bir z-endeksi ekleyemedi.

— eBar Çözümleri
kaynak

Ben bu html {z-index:1; position:relative;}menü IE üzerinde atlıkarınca görüntü üzerinde gitmek için izin bulundu .

— bassplayer7

2

Üst düğümlerde daha önce bahsedilen yüksek z-endeksleme ihtiyaçlarınızı karşılamıyorsa, alternatif çözüm oluşturabilir ve bunu IE koşullu yorumlarıyla veya Modernizr tarafından sağlanan (daha idealist) özellik algılamayı kullanarak sorunlu tarayıcılara hedefleyebilirsiniz.

Modernizr için hızlı (ve açık bir şekilde çalışıyor) testi:

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

— küremsi
kaynak

Çok hoş! Özellik algılama kesinlikle gitmenin yoludur.

— Jason

1

Yani css standardına farklı anlayış için, yani bir hata gibi görünmüyor. Dış kapsayıcı z-endeksi belirtilmezse, ancak iç öğe daha yüksek bir z-dizini belirtir. Dolayısıyla, kabın kardeşi yüksek z-endeksi elemanının üzerine bindirilebilir. Böyle olsa bile, sadece IE7'de gerçekleşir, ancak IE6, IE8 ve Firefox tamam.

— C2J
kaynak

0

Genel olarak IE6'da, belirli UI elemanları yerel kontrollerle uygulanır. Bu kontroller tamamen ayrı bir aşamada (pencere?) Oluşturulur ve z-endeksinden bağımsız olarak her zaman diğer tüm kontrollerin üzerinde görünür. Seçme kutuları böyle bir sorunlu kontrol.

Bu soruna geçici bir çözüm bulmak için tek yol, IE'nin ayrı bir "pencere" olarak oluşturduğu içeriği oluşturmaktır - bir metin kutusunun üzerine bir seçim kutusu veya daha faydalı bir şekilde bir iframe yerleştirebilirsiniz.

Kısacası, IE'nin bu yerleşik UI kontrollerini yerleştirmesine izin vermek için, menü gibi şeyler gibi "on-hover" i bir iframe içine koymanız gerekir.

Bu IE7'de düzeltilmiş olmalıdır (bkz. Http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) ama belki bir çeşit uyumluluk modunda mı çalışıyorsunuz?

— Eamon Nerbonne
kaynak

i IE6 z-endeksi hata hakkında biliyorum - ve bu sabit - ama nispeten / kesinlikle pozisyon elemanları / IE7 (ki IE8 sabit) girişleri ile başka bir sorun var - ben çözümler (z-indeces ile oynarken) birkaç bulundu, ama hiçbiri işe yaramadı - bu yüzden orada soruyorum ... Her neyse cevap için teşekkürler.

— rezna

0

Bu hata, standart ayrı yığın bağlam IE hatası daha ayrı bir sorun gibi görünüyor. Birden çok yığılmış girişleri (aslında her satırda bir otomatik tamamlayıcı içeren bir tablo) ile benzer bir sorun vardı. Bulduğum tek çözüm, her hücreye azalan bir z-endeksi değeri vermekti.

— Jeremy Kauffman
kaynak

0

Açılır menü oluşturmak ve z-endeksiyle ilgili bir sorun yaşamak istiyorsanız, aynı değere sahip z-dizinleri oluşturarak çözebilirsiniz (z-endeksi: 999; örneğin) .. Üst ve alt div'lere z-endeksi ve sorunu çözecek. Sorunu bununla çözüyorum. Farklı z-dizinleri koyarsam, ana div'ım üzerinde çocuğum div'ı göstereceğim, ancak, faremi menü sekmesinden alt menü div'a (açılır liste) taşımak istediğimde, yok oluyor ... sonra aynı değere sahip z-endeksleri koymak ve sorunu çözmek ..

— Marko
kaynak

0

IE7 (onun bir araç çubuğu) için geliştirici araçlarını kullanarak ve div div diğer div altında olacak bir negatif z-endeksi ekleyerek çözüldü.

— Lucas
kaynak