ปัญหาการเลเยอร์ของดัชนีดัชนี IE7

163

ฉันได้แยกกรณีทดสอบเล็กน้อยเกี่ยวกับz-indexข้อบกพร่องของ IE7 แต่ไม่ทราบวิธีแก้ไข ฉันเล่นมาz-indexทั้งวัน

มีอะไรผิดปกติกับz-indexใน IE7

ทดสอบ 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:

<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
แหล่งที่มา

หากคุณกำลังมองหางานและไม่ต้องจัดเรียง html ทั้งหมดของคุณใหม่ให้อยู่ในบริบทสแต็กลอง

— Nasaralla

268

ดัชนี Z ไม่ใช่การวัดที่แน่นอน มันเป็นไปได้สำหรับองค์ประกอบกับ Z-ดัชนี: 1000 จะอยู่เบื้องหลังองค์ประกอบที่มีดัชนี z: 1 - ตราบใดที่องค์ประกอบแต่ละที่แตกต่างกันอยู่ในบริบทซ้อน

เมื่อคุณระบุ z-index คุณกำลังระบุมันสัมพันธ์กับองค์ประกอบอื่น ๆ ในบริบทการสแต็คเดียวกันและแม้ว่าย่อหน้าของ spec ของ CSS บน Z-indexบอกว่าบริบทการสแต็กใหม่จะถูกสร้างขึ้นสำหรับเนื้อหาในตำแหน่งที่มีดัชนี z เท่านั้น อัตโนมัติ (หมายถึงเอกสารทั้งหมดของคุณควรเป็นบริบทการสแต็คเดียว) คุณได้สร้างช่วงการวางตำแหน่ง: น่าเสียดายที่ IE7 ตีความเนื้อหาที่มีตำแหน่งโดยไม่ต้องมีดัชนี z นี่เป็นบริบทการสแต็กใหม่

ในระยะสั้นลองเพิ่ม CSS นี้:

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

หรือออกแบบเอกสารใหม่โดยที่ช่วงของคุณไม่มีตำแหน่ง: สัมพันธ์กันอีกต่อไป:

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

ดูhttp://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/สำหรับตัวอย่างที่คล้ายกันของข้อผิดพลาดนี้ เหตุผลที่ให้องค์ประกอบหลัก (ตัวอย่าง -1 ในตัวอย่างของคุณ) ผลงาน z-index ที่สูงขึ้นก็เพราะเด็ก ๆ ที่มีซองจดหมาย -1 (รวมถึงเมนู) ทั้งหมดจะทับซ้อนพี่น้องทั้งหมดของซองจดหมาย 1 (โดยเฉพาะซองจดหมาย -2)

แม้ว่าดัชนี z ช่วยให้คุณสามารถกำหนดอย่างชัดเจนว่าสิ่งที่ทับซ้อนกันได้โดยไม่ต้องดัชนี z เพื่อฝังรากลึกที่มีการกำหนดไว้อย่างดี ในที่สุด IE6 มีข้อผิดพลาดเพิ่มเติมที่ทำให้ selectboxes และ iframes ลอยอยู่เหนือสิ่งอื่นใด

— Eamon Nerbonne
แหล่งที่มา

4

ในที่สุดก็แก้ไขได้ :) - ตำแหน่งสัมพัทธ์น่ารำคาญจริง ๆ ดังนั้นฉันจึงยอมรับความคิดของคุณโดยไม่ต้องใช้องค์ประกอบ 'ซองจดหมาย' - ดูเหมือนว่าจะแก้ปัญหาและใช้งานได้ - เพียงแค่ต้องออกแบบบิตใหม่สำหรับกล่องแนะนำ - ขอบคุณ ล็อต

— rezna

6

มีสามสิ่งที่แตกต่างกันที่ส่งผลกระทบต่อองค์ประกอบทับซ้อนกันคือบริบทการซ้อนลำดับของแหล่งที่มาและลำดับการวาดภาพ ปัญหาที่ชัดเจนที่สุดเกิดขึ้นเมื่อจัดการกับบริบทการสแต็คการรู้อีกสองเรื่องจะช่วยให้คุณเข้าใจ gotchas ที่ลึกลับยิ่งขึ้น ที่มา: CSS-Discuss Wiki

— rjb

2

เพิ่มดัชนี z เพื่อองค์ประกอบหลักเป็นโซลูชั่นที่ยอดเยี่ยม

— Danyun หลิว

2

ผมรักคุณ. เพิ่มตำแหน่ง: ญาติและดัชนี z: 500 ถึงผู้ปกครองของฉันและแก้ไขได้!

— Aymeric Gaurat-Apelli

2

ฉันทำปัญหานี้ด้วยความคิดเห็นที่แสดงวิธีแก้ปัญหา 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
แหล่งที่มา

หลังจากอ่านโซลูชัน "ถูกต้อง" ด้านบนฉันพยายามกำหนดวิธีแก้ปัญหาที่ซับซ้อนกว่าปัญหาเล็กน้อยในคำถาม จากนั้นฉันก็โยนคำตอบนี้ลงไปและมันก็ใช้งานได้เหมือนมีเสน่ห์ หากวิธีการแก้ปัญหาข้างต้นเป็นวิธีที่ถูกต้องนี่เป็นวิธีที่ง่าย ขอบคุณ!

— แลนดอน

11

ในองค์ประกอบตำแหน่ง IE สร้างบริบทการสแต็คใหม่เริ่มต้นด้วยค่าดัชนี z เป็น 0 ดังนั้นดัชนี z ทำงานไม่ถูกต้อง

ลองให้องค์ประกอบหลักมีค่าดัชนี z สูงกว่า (อาจสูงกว่าค่าดัชนี z ของเด็กเอง) เพื่อแก้ไขข้อบกพร่อง

— ed1nh0
แหล่งที่มา

1

ขอบคุณ วิธีนี้ใช้ได้ผลกับฉันโดยให้ดัชนี z ของคอนเทนเนอร์หลักไม่จำเป็นต้องสูงกว่าดัชนี z ของเด็ก

— neelmeg

4

ฉันพบปัญหานี้ แต่ในโครงการขนาดใหญ่ที่ต้องทำการเปลี่ยนแปลง HTML และกลายเป็นปัญหาทั้งหมดดังนั้นฉันจึงกำลังมองหาโซลูชัน css ที่แท้จริง

เมื่อวางposition:relative; z-index:-1เนื้อหาหลักของฉันลงในเนื้อหาเนื้อหาของฉันก็ปรากฏขึ้นเหนือเนื้อหาใน IE7 (มันแสดงแล้วโดยไม่มีปัญหาในเบราว์เซอร์อื่นทั้งหมดและใน ie8 +)

ปัญหาที่เกิดขึ้นนี้ถูกปิดการใช้งานการโฮเวอร์และคลิกทั้งหมดในเนื้อหาทั้งหมดในองค์ประกอบด้วยz-index:-1ดังนั้นฉันไปที่องค์ประกอบหลักของหน้าทั้งหมดและให้มันposition:relative; z-index:1

ซึ่งแก้ไขปัญหาและรักษาฟังก์ชันการทำงานของชั้นที่ถูกต้อง

รู้สึกแฮ็คเล็กน้อย แต่ทำงานได้ตามที่ต้องการ

— lukeroxout
แหล่งที่มา

3

ฉันพบว่าฉันต้องวางการกำหนดดัชนี z พิเศษใน div ในแผ่นใส่แผ่นเฉพาะ ie7:

div {z-index: 10; }

สำหรับดัชนี z ของ div ที่ไม่เกี่ยวข้องเช่น nav เพื่อแสดงเหนือแถบเลื่อน ฉันไม่สามารถเพิ่มดัชนี z ลงใน div ของตัวเลื่อนได้

— โซลูชั่น eBar
แหล่งที่มา

ฉันพบว่าสิ่งนี้นอกเหนือจากการhtml {z-index:1; position:relative;}อนุญาตให้เมนูไปยังภาพหมุนบน IE

— bassplayer7

2

หากการทำดัชนี z ที่สูงกว่าก่อนหน้านี้ในโหนดพาเรนต์ไม่เหมาะกับความต้องการของคุณคุณสามารถสร้างโซลูชันทางเลือกและกำหนดเป้าหมายไปยังเบราว์เซอร์ที่มีปัญหาไม่ว่าจะโดย IE หรือคอมเม้นท์ตามเงื่อนไข

การทดสอบอย่างรวดเร็ว (และเห็นได้ชัดว่าทำงาน) สำหรับ 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;
});

— ลูกกลม
แหล่งที่มา

ดีมาก! การตรวจจับคุณสมบัติเป็นวิธีที่แน่นอน

— Jason

1

ดูเหมือนว่าไม่ใช่ข้อผิดพลาดเช่นเพียงเพื่อความเข้าใจที่แตกต่างกับมาตรฐาน CSS หากคอนเทนเนอร์ภายนอกไม่ได้ระบุดัชนี z แต่องค์ประกอบภายในระบุดัชนี z สูงกว่า ดังนั้นพี่น้องของคอนเทนเนอร์อาจวางองค์ประกอบ z-index สูง แม้ว่าจะเป็นเช่นนั้นจะเกิดขึ้นใน IE7 เท่านั้น แต่ IE6, IE8 และ Firefox ก็โอเค

— c2j
แหล่งที่มา

0

โดยทั่วไปแล้ว IE6 องค์ประกอบ UI บางอย่างจะถูกนำมาใช้กับการควบคุมเนทิฟ ตัวควบคุมเหล่านี้จะแสดงผลในเฟสที่แยกจากกันอย่างสมบูรณ์ (หน้าต่าง?) และจะปรากฏเหนือตัวควบคุมอื่นใดเสมอโดยไม่คำนึงถึง z-index กล่องเลือกเป็นอีกหนึ่งการควบคุมที่มีปัญหา

วิธีเดียวในการแก้ไขปัญหานี้คือการสร้างเนื้อหาที่ IE แสดงผลเป็น "หน้าต่าง" ที่แยกจากกัน - นั่นคือคุณสามารถวาง selectbox ไว้เหนือกล่องข้อความหรือเป็นประโยชน์มากขึ้นถ้าเป็น iframe

กล่าวโดยย่อคุณจะต้องใส่ "on-hover" เหมือนสิ่งต่าง ๆ เช่นเมนูใน iframe เพื่อให้ IE วางสิ่งเหล่านี้ไว้บนตัวควบคุม UI ในตัว

สิ่งนี้ควรได้รับการแก้ไขใน IE7 (ดูhttp://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) แต่บางทีคุณกำลังทำงานในโหมดความเข้ากันได้บางประเภท?

— Eamon Nerbonne
แหล่งที่มา

ฉันรู้เกี่ยวกับข้อผิดพลาดของดัชนี IE6 z - และสิ่งนี้ได้รับการแก้ไขแล้ว - แต่ก็มีปัญหาอีกประการหนึ่งเกี่ยวกับองค์ประกอบ / อินพุตใน IE7 (ซึ่งได้รับการแก้ไขใน IE8) - ฉันพบวิธีแก้ปัญหาสองข้อ (เล่นกับ z-indeces) ไม่มีพวกเขาทำงาน - นั่นเป็นเหตุผลที่ฉันถามที่นั่น ... อย่างไรก็ตามขอบคุณคำตอบ

— rezna

0

ข้อผิดพลาดนี้ดูเหมือนว่าจะเป็นปัญหาที่แยกต่างหากมากกว่าข้อบกพร่อง IE บริบทสแต็คมาตรฐานแยก ฉันมีปัญหาที่คล้ายกันกับอินพุตแบบหลายสแต็กซ์ ทางออกเดียวที่ฉันพบคือให้ค่าแต่ละดัชนีของเซลล์ลดลง

— Jeremy Kauffman
แหล่งที่มา

0

หากคุณต้องการสร้างเมนูแบบเลื่อนลงและมีปัญหากับ z-index คุณสามารถแก้ปัญหาได้โดยสร้าง z-indexes ที่มีค่าเดียวกัน (z-index: 999; ตัวอย่างเช่น) .. เพียงใส่ z-index ใน parent และ child div และ ที่จะแก้ปัญหา ฉันแก้ปัญหาด้วยสิ่งนั้น ถ้าฉันใส่ดัชนี z ต่างกันแน่นอนว่ามันจะแสดง div ลูกของฉันเหนือ div parent แต่เมื่อฉันต้องการเลื่อนเมาส์จากแท็บเมนูไปที่ div เมนูย่อย (รายการแบบเลื่อนลง) มันหายไป ... หลังจากนั้น ฉันใส่ดัชนี z ของค่าเดียวกันและแก้ปัญหา ..

— มาร์โค
แหล่งที่มา

0

ฉันแก้ไขมันโดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ IE7 (แถบเครื่องมือ) และเพิ่มดัชนี z ลบลงในคอนเทนเนอร์ของ div ที่จะอยู่ต่ำกว่า div อื่น ๆ

— ลูคัส
แหล่งที่มา