html - CSS 定位图像在 Internet Explorer/IE 中不可见 z-index 未修复

Question

我正在处理时间轴，当时间轴的一部分完成时，背景将由绿色图像组成，前景将具有复选标记的实际图像元素。这是它在 Firefox、Chrome 和 Safari 中的外观(正确):

这是它在 IE 7 和 8(也许是 9，还没有测试过)中的样子(不正确): :

我正在处理相对和绝对定位。我已经尝试了所有我能想到的关于 z-index 和其他技术的方法。我什至找到了 article在这里有一个潜在的解决方案(使 img 元素的 z-index 小于背景的 z-index)但是没有用。

无论如何，请帮忙!

这是我的(简化的)CSS:

    .timeline-container {
        width: 820px;
        height: 50px;
    }        
    .timeline-step {
        width: 164px;
        height: 22px;
        float: left;
        background: url(http://i.stack.imgur.com/amRJt.png) -10px 0px no-repeat;
    }                
    .complete {
        background: url(http://i.stack.imgur.com/NgSG6.png!) -10px 0px no-repeat;
        position: relative;
    }
    .complete img {
        position: absolute;
        top: 5px;
        left: 50%;
        right: 50%;
    }                
    .timeline-divider {
        background: url(http://i.stack.imgur.com/AJw3e.png);
        height: 30px;
        width: 1px;
        float: right;
    }        
    .timeline-label {
        color: #C5C5C%;
        font-size: 12px;
        font-weight: bold;
        width: 100%;
        display: block;
        float: left;
        text-align: center;
    }        

这是我的(简化的)HTML:

<div class="timeline-container">
    <div class="timeline-step complete">
        <img src="http://i.stack.imgur.com/hS83c.png" alt="complete" />
        <div class="timeline-divider">
        </div>
        <span class="timeline-label">Confirm Eligibility</span>
    </div>
</div>

关于如何让该复选框显示在时间轴的绿色“完成”部分前面有什么想法吗？谢谢!

在JFiddle中貌似可以，但是取出来直接在IE中使用，就失败了...

这是 JFiddle:http://jsfiddle.net/SY9q5/

Answer 1

添加一个 position:relative； z-索引:0； 到.timeline-container

父标签然后给你的图片分配一个z索引 > 0

http://jsfiddle.net/5wsbC/

希望对你有帮助