绝对定位元素在IE7上被裁剪

Question

So it has veen a long time since a client has asked me to support IE7 and now I'm suffering the consequences. I have 4 divs with an icon (the red square in the example) in between them:

<div class="slider-wrapper">
    <div class="tabs">                                                                  
        <div class="item-1 total-4">
            <span>Cumulez les avantages !</span> 
            <div class="icons small icons-plus"></div>                              
        </div>                                             
        <div class="item-2 total-4">
            <span>Avantages Installateurs</span>  
            <div class="icons small icons-plus"></div>                              
        </div>                                                
        <div class="item-3 total-4">
            <span>Avantages Fabricants</span>   
            <div class="icons small icons-plus"></div>                           
        </div>                                              
        <div class="item-4 total-4">
            <span>Prime économies d’énergie</span>                    
        </div>
    </div>                                    
</div>

The icons must be between each of the divs and it works in every major browser including IE8, but on IE7 it gets cropped, ignoring the z-index I give it.

This is a jsfiddle I made with the example:

http://jsfiddle.net/z2K66/

You can test it on IE7 using this url: http://jsfiddle.net/z2K66/embedded/result/ and you will see how the red squares are cut in half. If you use the regular fiddle it will break cause they don't support IE7 (lucky them!)

This is my css:

.slider-wrapper .tabs .total-4 {
    background-color: #8F1083;
    color: #FFFFFF;
    display: table;
    float: left;
    font-size: 17px;
    font-weight: bold;
    height: 75px;
    position: relative;
    text-align: center;
    width: 25%;
}

.slider-wrapper .tabs span {
    display: table-cell;
    vertical-align: middle;
}
.slider-wrapper .tabs .icons {
    position: absolute;
    right: -15px;
    top: 24px;
    height:30px;
    width:30px;
    background:red;
    z-index: 111111111;
}

Answer 1

Fixing IE z-index. Credit goes to CSS Tips

This isn't a complete solution to fix all weird IE z-index issues. What it does is loop through each of the elements that you declare and apply ever-declining z-index values on them. IE gets this backwards, and this sets it correctly. The reason it's not the complete solution is because sometimes it's not DOM-order that you need z-index to be in, and sometimes scoping comes into play as well.

Nonetheless, the view the demo in IE 7.

JQuery Version

$(function() {
   var zIndexNumber = 1000;
   // Put your target element(s) in the selector below!
   $("div").each(function() {
           $(this).css('zIndex', zIndexNumber);
           zIndexNumber -= 10;
   });});

MooTools Version

if(Browser.Engine.trident){
   var zIndexNumber = 1000;
   // Put your target element(s) in the selector below!
   $$('div').each(function(el,i){
           el.setStyle('z-index',zIndexNumber);
           zIndexNumber -= 10;
   });};