Question

因此，自从客户要求我支持IE7以来，它已经存在了很长时间，现在我正在遭受后果。我有4个带有图标的div（示例中的红色方块）：

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

这是我用例子做的一个小说：

http://jsfiddle.net/z2K66/

你可以使用这个url：http://jsfiddle.net/z2K66/embedded/result/在IE7上测试它，你会看到红色方块是如何切成两半的。如果你使用常规小提琴，它会破坏因为它们不支持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得到了这个，这正确地设置它。它不是完整解决方案的原因是因为有时它不是你需要z-index的DOM顺序，有时候范围也会发挥作用。

尽管如此，IE 7中的view the demo。

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

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

1 个答案: