Vấn đề phân lớp Z-Index của IE7

163

Tôi đã cô lập một trường hợp thử nghiệm nhỏ về z-indexlỗi của IE7 , nhưng không biết cách khắc phục. Tôi đã chơi với z-indextất cả các ngày dài.

Có gì sai z-indextrong IE7?

Kiểm tra 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;
}

Kiểm tra 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
nguồn
Nếu bạn đang tìm kiếm một công việc xung quanh và bạn không sắp xếp lại tất cả html của mình để trở nên độc đáo trong bối cảnh ngăn xếp, hãy thử điều này: brenelz.com/blog/squish-the-iNET-explorer-z-index-orms
— Nasaralla

Câu trả lời:

268

Chỉ số Z không phải là một phép đo tuyệt đối. Có thể một phần tử có chỉ số z: 1000 đứng sau một phần tử có chỉ số z: 1 - miễn là các phần tử tương ứng thuộc các bối cảnh xếp chồng khác nhau .

Khi bạn chỉ định chỉ mục z, bạn chỉ định nó liên quan đến các yếu tố khác trong cùng bối cảnh xếp chồng và mặc dù đoạn văn của đặc tả CSS trên chỉ mục Z nói rằng bối cảnh xếp chồng mới chỉ được tạo cho nội dung được định vị bằng chỉ mục z khác tự động (có nghĩa là toàn bộ tài liệu của bạn phải là một bối cảnh xếp chồng), bạn đã làm xây dựng một khoảng định vị: không may IE7 diễn giải nội dung được định vị mà không có chỉ mục z này là bối cảnh xếp chồng mới.

Nói tóm lại, hãy thử thêm CSS này:

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

hoặc thiết kế lại tài liệu sao cho các nhịp của bạn không có vị trí: tương đối nữa:

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

Xem http://www.brenelz.com/blog/2009/02/03/squish-the-iNET-explorer-z-index-orms/ để biết ví dụ tương tự về lỗi này. Lý do đưa ra một yếu tố cha mẹ (phong bì-1 trong ví dụ của bạn) chỉ số z cao hơn hoạt động là bởi vì sau đó tất cả các con của phong bì-1 (bao gồm cả menu) sẽ chồng lấp lên tất cả anh chị em của phong bì-1 (cụ thể là phong bì-2).

Mặc dù chỉ mục z cho phép bạn xác định rõ ràng cách mọi thứ trùng lặp, ngay cả khi không có chỉ mục z, thứ tự phân lớp được xác định rõ . Cuối cùng, IE6 có một lỗi bổ sung khiến cho các hộp chọn và iframe nổi lên trên tất cả mọi thứ khác.

— Eamon Nerbonne
nguồn
4
cuối cùng cũng giải quyết được :) - vị trí tương đối thực sự gây khó chịu nên bằng cách nào đó tôi đã chấp nhận ý tưởng của bạn mà không cần các yếu tố 'phong bì' - nó dường như giải quyết vấn đề và cũng hoạt động - chỉ cần thiết kế lại một chút mã cho hộp gợi ý - thx a rất nhiều
— rezna
6
Có ba điều khác nhau ảnh hưởng đến cách các yếu tố chồng chéo lẫn nhau: xếp chồng bối cảnh, thứ tự nguồn và thứ tự vẽ. Các vấn đề rõ ràng nhất xuất hiện khi xử lý các bối cảnh xếp chồng - biết hai điều còn lại sẽ giúp bạn tìm ra các vấn đề bí mật hơn. Nguồn: CSS-Thảo luận Wiki.
— rjb
2
thêm chỉ số z vào phần tử cha là một giải pháp tuyệt vời
— Danyun Liu
2
Tôi mến bạn. Đã thêm vị trí: tương đối và chỉ số z: 500 cho cha mẹ tôi và nó đã sửa nó!
— Aymeric Gaurat-Apelli
2
Tôi đã đưa ra một câu đố về vấn đề này với các bình luận thể hiện giải pháp. jsfiddle.net/fNcGu/3
— Christopher Johnson
15

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

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});
— nixis
nguồn
sau khi đọc giải pháp "đúng" ở trên, tôi đã cố gắng đưa ra một giải pháp cho vấn đề phức tạp hơn đáng kể của tôi so với giải pháp tầm thường trong câu hỏi. sau đó tôi đã ném câu trả lời này vào và nó hoạt động như một cơ duyên. Nếu giải pháp trên là đúng, đây chắc chắn là giải pháp dễ dàng. cảm ơn!
— Landon
11

Trong IE, các phần tử được định vị tạo ra bối cảnh xếp chồng mới, bắt đầu với giá trị chỉ số z là 0. Do đó, chỉ mục z không hoạt động chính xác.

Hãy thử cung cấp cho phần tử cha một giá trị chỉ mục z cao hơn (thậm chí có thể cao hơn chính giá trị chỉ mục z của con) để sửa lỗi.

— ed1nh0
nguồn
1
Cảm ơn. Giải pháp này hiệu quả với tôi bằng cách đưa ra chỉ số z của thùng chứa cha, không nhất thiết phải cao hơn chỉ số z của con.
— neelmeg
4

Tôi đã gặp phải vấn đề này, nhưng trong một dự án lớn, nơi các yêu cầu thay đổi HTML phải được yêu cầu và trở thành toàn bộ vấn đề, vì vậy tôi đang tìm kiếm một giải pháp css thuần túy.

Bằng cách đặt position:relative; z-index:-1vào nội dung cơ thể chính của tôi, nội dung thả xuống tiêu đề của tôi đột nhiên hiển thị phía trên nội dung cơ thể trong eg7 (nó đã hiển thị mà không gặp sự cố trong tất cả các trình duyệt khác và trong eg8 +)

Vấn đề với điều đó là điều này đã vô hiệu hóa tất cả các hành động di chuột và nhấp chuột trên tất cả nội dung trong phần tử với z-index:-1vì vậy tôi đã chuyển đến phần tử cha của toàn bộ trang và đưa raposition:relative; z-index:1

Mà đã khắc phục vấn đề và giữ lại chức năng phân lớp chính xác.

Cảm thấy một chút hacky, nhưng làm việc theo yêu cầu.

— lukeroxout
nguồn
3

Tôi thấy rằng tôi phải đặt một chỉ định z-index đặc biệt trên div trong một styelsheet cụ thể của eg7:

div {z-index: 10; }

Đối với chỉ số z của các div không liên quan, chẳng hạn như điều hướng, để hiển thị phía trên thanh trượt. Tôi không thể đơn giản thêm chỉ mục z vào div div.

— Giải pháp eBar
nguồn
Tôi thấy rằng điều này ngoài việc html {z-index:1; position:relative;}cho phép menu đi qua hình ảnh băng chuyền trên IE.
— bassplayer7
2

Nếu việc lập chỉ mục z cao hơn được đề cập trước đó trong các nút cha không phù hợp với nhu cầu của bạn, bạn có thể tạo giải pháp thay thế và nhắm mục tiêu đến các trình duyệt có vấn đề bằng các nhận xét có điều kiện của IE hoặc sử dụng tính năng phát hiện tính năng (lý tưởng hơn) do Modernizr cung cấp.

Kiểm tra nhanh (và rõ ràng đang hoạt động) cho 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;
});
— hình cầu
nguồn
Rất đẹp! Phát hiện tính năng chắc chắn là con đường để đi.
— Jason
1

Có vẻ như không phải là một lỗi tức là, chỉ để hiểu khác nhau về tiêu chuẩn css. Nếu vùng chứa bên ngoài không được chỉ định chỉ mục z, nhưng phần tử bên trong đã chỉ định chỉ mục z cao hơn. Vì vậy, anh chị em của người chứa có thể che lấp phần tử chỉ số z cao. Ngay cả khi như vậy, nó chỉ xảy ra trong IE7, nhưng IE6, IE8 và Firefox vẫn ổn.

— c2j
nguồn
0

Trong IE6 nói chung, các thành phần UI nhất định được triển khai với các điều khiển gốc. Các điều khiển này được hiển thị trong một pha hoàn toàn riêng biệt (cửa sổ?) Và luôn xuất hiện trên bất kỳ điều khiển nào khác, bất kể chỉ số z. Hộp chọn là một điều khiển có vấn đề như vậy.

Cách duy nhất để giải quyết vấn đề này là xây dựng nội dung mà IE biểu hiện dưới dạng "cửa sổ" riêng biệt - tức là bạn có thể đặt một hộp chọn trên một hộp văn bản, hoặc, một cách hữu ích hơn, một iframe.

Nói tóm lại, bạn sẽ cần đặt "trên di chuột" giống như những thứ như menu trong iframe để cho phép IE đặt các điều khiển UI tích hợp bên trên.

Điều này đã được sửa trong IE7 (xem http://bloss.msdn.com/ie/archive/2006/01/17/514076.aspx ) nhưng có lẽ bạn đang chạy trong một loại chế độ tương thích?

— Eamon Nerbonne
nguồn
Tôi biết về lỗi chỉ số z của IE6 - và lỗi này đã được khắc phục - nhưng có một vấn đề khác với các yếu tố / yếu tố vị trí tương đối / hoàn toàn trong IE7 (được sửa trong IE8) - tôi đã tìm thấy một vài giải pháp (chơi với z-indeces), nhưng không ai trong số họ làm việc cho - đó là lý do tại sao tôi hỏi ở đó ... Dù sao đi nữa cho câu trả lời.
— rezna
0

Lỗi này dường như là một vấn đề riêng biệt hơn so với lỗi IE bối cảnh xếp chồng tiêu chuẩn. Tôi gặp vấn đề tương tự với nhiều đầu vào xếp chồng lên nhau (về cơ bản là một bảng có trình tự động hoàn thành trong mỗi hàng). Giải pháp duy nhất tôi tìm thấy là cung cấp cho mỗi ô một giá trị chỉ số z giảm.

— Jeremy Kauffman
nguồn
0

Nếu bạn muốn tạo menu thả xuống và gặp vấn đề với chỉ mục z, bạn có thể giải quyết nó bằng cách tạo các chỉ mục z có cùng giá trị (ví dụ z-index: 999;) Chỉ cần đặt chỉ mục z vào div cha và con và Điều đó sẽ giải quyết vấn đề. Tôi giải quyết vấn đề với điều đó. Nếu tôi đặt các chỉ mục z khác nhau, chắc chắn, nó sẽ hiển thị div con của tôi trên div cha mẹ của tôi, nhưng, một khi tôi muốn di chuyển chuột từ tab menu sang div menu phụ (danh sách thả xuống), nó sẽ biến mất ... tôi đặt các chỉ số z có cùng giá trị và giải quyết vấn đề ..

— Đánh dấu
nguồn
0

Tôi đã giải quyết nó bằng cách sử dụng các công cụ dành cho nhà phát triển cho IE7 (thanh công cụ của nó) và thêm chỉ số z âm vào vùng chứa của div sẽ nằm dưới div khác.

— Lucas
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.