IE8: sau z-index

Question

Tôi đã thấy nhiều ví dụ để khắc phục sự cố điên rồ của chỉ mục z của IE8 nhưng không ai trong số chúng có vẻ giúp tôi trong trường hợp này.

Tôi tạo kiểu bố cục 'breadcrumb' dựa trên UL/LI, trong đó mỗi đường dẫn đồ họa có thể có một trong 3 màu nền khác nhau và mỗi màu có một 'nắp cuối nghiêng'. Đây là cách có vẻ trong bất cứ điều gì nhưng IE8:

ban đầu ngây thơ-nhưng-làm việc thực hiện của chúng tôi cho biết thêm đánh dấu phi ngữ nghĩa giữa đường dẫn với hình ảnh của mỗi cặp chồng chéo có thể - có 9 kết hợp được lựa chọn với một chuỗi các lớp phức tạp và JS khi các lớp crumb thay đổi. Ugh. Tôi muốn đâm vào một giải pháp khác dựa trên các phần tử giả chồng chéo lên bên phải để chúng ta có thể bỏ tất cả các công cụ và logic 'chia'.

HTML của tôi trông như thế này:

<ul class="breadcrumbs"> 
    <li class="positive">positive</li> 
    <li>default</li> 
    <li class="positive">positive</li> 
    <li class="negative">negative</li> 
    <li>default</li> 
</ul> 

tôi sẽ không khoan bạn với đệm và nền và như vậy, đủ để nói rằng mỗi người trong số các nền là một mảnh lặp lại - mặc định (không có lớp học) có màu xám, dương là màu xanh lá cây, âm là màu đỏ. Đối với mỗi mặc định/dương/âm có một hình ảnh của một nghiêng.

Dưới đây là một số CSS:

ul.breadcrumbs 
    { 
     display: block; 
     clear: both; 
     position: relative; 
     z-index: 10; 
    } 
    ul.breadcrumbs li 
    { 
     display: block; 
     float: left; 
     position: relative; 
     ...height,width,padding,etc.etc... 
     background: url(sprite-x.png) repeat-x 0 -216px; 
    } 
    ul.breadcrumbs li.negative { background-position: 0 -243px; } 
    ul.breadcrumbs li.positive { background-position: 0 -323px; } 

Đó mang lại cho tôi mẩu của tôi với màu sắc phù hợp. Bây giờ cho các slants:

ul.breadcrumbs li:after 
    { 
     content: ""; 
     display: block; 
     position: absolute; 
     top: 0; left: 100%; 
     width: 24px; 
     height: 100%; 
     z-index: 1; 
     background: url(sprite.png) no-repeat 0 -783px; 
    } 
    ul.breadcrumbs li.negative:after { background-position: 0 -864px; } 
    ul.breadcrumbs li.positive:after { background-position: -25px -864px; } 

Điều này làm việc tuyệt vời - mỗi mảnh vụn 'chọn đúng nghiêng dựa trên lớp của nó. nó chồng lên cốm sang bên phải vì vậy tôi đã phải nhường chỗ cho nghiêng để 'che' phần của nó:

ul.breadcrumbs li+li:before 
    { 
     content: ""; 
     display: block; 
     float: left; 
     width: 22px; 
     height: 100%; 
    } 

làm việc Tất cả điều này một điều trị, trừ IE8:

Các: sau khi nội dung là BEHIND vụn ở bên phải. Tôi hiểu có một số 'đặt lại z-index' weirdness trong IE8 phải làm với các yếu tố vị trí, nhưng tôi CÓ vị trí của li hoặc vị trí tuyệt đối của: sau khi sẽ không làm việc. Tôi cũng sẽ không biết có bao nhiêu li của có thể có, và tôi không biết những gì z-index nó sẽ được 'sống' trên các trang.

Câu thần chú z-index ma thuật nào sẽ làm cho IE8 hài lòng?

Answer 1

Dưới đây là một cách giải quyết bằng cách sử dụng thư viện jQuery:

jsBin demo

CSS:

ul li{ 
    position:relative; 
    float:left; 
    display:inline; 
    font-family:Verdana, Helvetica, sans-serif; 
    height:18px; 
    padding:0px 34px 0 38px; 
    margin-left:-33px; 
    font-size:12px; 
    background:url(http://i42.tinypic.com/zya52u.png) right top; 
    color:#fff; 
    } 
    .positive{ 
    background-position:right -18px; 
    } 
    .negative{ 
    background-position:right -36px; 
    } 

jQuery:

var liLen = $('.breadcrumbs li').length; 
$('.breadcrumbs li').each(function(i,e){ 
    $(this).css({'z-index' : '-'+(liLen+i) }); 
}); 

Answer 2

này có lẽ liên quan đến IE bug 566462 (fixe d trong IE9).

Tôi thường workaround lỗi này bằng cách thêm trống SPAN yếu tố với JS và gắn nó với cùng một phong cách như nội dung CSS tạo (:after trong trường hợp của bạn):

ul.breadcrumbs > li:after, 
ul.breadcrumbs > li > SPAN {/* ... */} 

ul.breadcrumbs > li.negative:after, 
ul.breadcrumbs > li.negative > SPAN {/* ... */} 

ul.breadcrumbs > li.positive:after, 
ul.breadcrumbs > li.positive > SPAN {/* ... */}