絕對定位的元素在IE7上得到裁剪

Question

所以它已經很長時間了，因爲客戶要求我支持IE7，現在我正在遭受後果。我有4個格與圖標（紅色正方形中的例子）在他們之間：

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

的圖標必須是每一個的div之間，它在每一個主要的瀏覽器包括IE8的作品，但在IE7它得到裁剪，忽略我給它的z-索引。

這是我的jsfiddle與所述示例：

http://jsfiddle.net/z2K66/

您可以使用此URL測試它在IE7：http://jsfiddle.net/z2K66/embedded/result/，你會看到紅色的方塊是如何削減一半。如果使用常規的撥弄它會破壞原因，他們不支持IE7（幸運他們！）

這是我的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

修復IE的z-index。積分爲CSS Tips

這不是一個完整的解決方案來修復所有奇怪的IE z-index問題。它所做的是循環遍歷所聲明的每個元素，並在其上應用不斷下降的z-index值。 IE獲取這個反向，並且這設置它正確。它不是完整解決方案的原因是因爲有時它不是DOM順序，所以你需要z-index進入，有時候也會考慮範圍。

儘管如此，IE 7

JQuery的版本

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

MooTools的版本

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; 
    });};