Z-index bị hỏng trong IE8?

Mã này hoạt động trên mọi trình duyệt khác mà tôi đã thử, ngoại trừ IE8.Z-index bị hỏng trong IE8?

IE8 dường như bỏ qua chỉ mục z - và cửa sổ bật lên trở thành cửa sổ bật xuống.

Ở đúng nơi, chỉ hiển thị bên dưới hình thu nhỏ.

Bất kỳ ai?

Cảm ơn!

HTML:

<a class="thumbnail" href="#thumb"> 
    <img src="comic_a3_thumb.jpg" height="300" width="212" border="0" 
     style="float:right; margin-top:10px;margin-bottom:10px;" 
     alt="description" /> 
    <span> 
     <img src="/images/comic_a3_popup.jpg" /> 
    </span> 
</a>

CSS:

.thumbnail{ 
    position: relative; 
    z-index: 0; 
} 

.thumbnail:hover{ 
    background-color: transparent; 
    z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
    position: absolute; 
    background-color: lightyellow; 
    padding: 5px; 
    left: 0px; 
    border: 1px dashed gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
    border-width: 0; 
    padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
    visibility: visible; 
    top: -140px; /*position where enlarged image should offset horizontally */ 
    left: -500px; 
}

Nguồn

2009-08-17 Anonymous

Câu trả lời đơn giản là thêm một giá trị z-index đó là lớn hơn giá trị .thumbnail:hover sang trạng thái di chuột của span.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
    visibility: visible; 
    top: -140px; /*position where enlarged image should offset horizontally */ 
    left: -500px; 
    z-index: 51; 
}

Nguồn

2009-08-17 20:36:08

cảm ơn bạn - giải quyết được vấn đề! –

Nếu tôi hiểu chính xác, bạn muốn span hiển thị phía trên phần tử được đánh dấu là hình thu nhỏ. Bạn chưa chỉ định z-index cho phần tử span. Dưới đây là một ví dụ làm việc:

 
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title>Pop-up Test</title> 
    <style type="text/css"> 
     #vbox { 
      border: 1px solid black; 
      height: 200px; 
      position: relative; 
      width: 200px; 
      z-index: 0; 
     } 

     #vbox:hover #hbox { 
      display: block; 
     } 

     #hbox { 
      border: 1px solid blue; 
      display: none; 
      height: 200px; 
      left: 50px; 
      position: relative; 
      top: 50px; 
      width: 200px; 
      z-index: 1; 
     } 
    </style> 
</head> 
<body> 
    <div id="vbox"> 
     <p>Hover over this box to show a hidden "pop-up".</p> 
     <p id="hbox">This box is a pop-up.</p> 
    </div> 
</body> 
</html>

Nguồn

2009-08-17 20:46:08

Cách khắc phục vấn đề này bằng cách thêm một lớp học để hình ảnh thu nhỏ như thế này:

.thumbnail:hover img.thumb {z-index:-50; position:relative;}

Nguồn

2010-01-06 15:52:02 Chris

Đặt những dòng này trong đầu trang của bạn

<!--[if IE]> 
    <style> 
      #your_faulty_div{ 
      background-color:#000; /*any color it doesn't matter*/ 
     filter: alpha(opacity=0); 
     } 
     </style> 
<![endif]-->

your_faulty_div là div bị lỗi do lỗi chỉ mục z của trình duyệt IE.

Hoạt động trơn tru, tôi sử dụng nó trong tất cả các dự án của mình, nơi tôi có các phần tử định vị chồng chéo.

Nguồn

2010-05-15 08:02:46

Bạn có ý nghĩa gì? Có phải đó là div mà phải lên hàng đầu, hay người được cho là phải đi phía sau? Cho nó một opacity 0 sẽ ẩn tất cả lại với nhau? Tôi có vấn đề với một vấn đề tương tự bản thân mình. Cảm ơn! – cederlof

Z-index bị hỏng trong IE8?

Trả lời

Các vấn đề liên quan