CSS-позиционированное изображение не видимо в Internet Explorer / IE z-index не исправляется

Question

Я работаю над временной шкалой, где, когда часть временной шкалы завершена, фон будет состоять из зеленого изображения, а на переднем плане будет фактический элемент изображения с галочкой.Вот как это выглядит ( правильно ) в Firefox, Chrome и Safari:

Вот так это выглядит ( неверно ) в IE 7 и 8 (возможно, 9, еще не проверял): :

Я работаю с относительным и абсолютным позиционированием.Я перепробовал все, что мог придумать в отношении z-index и других методов.Я даже нашел здесь статью , в которой было потенциальное решение (сделать z-индекс элемента img меньше, чем z-индекс фона), но это не сработало.

В любом случае,пожалуйста, помогите!

Вот мой (упрощенный) 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

Я бы предложил не использовать абсолютную позицию, которая могла бы быть причиной

Попробуйте

.complete img {

    padding-top:5px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    z-index:10;

}     

http://jsfiddle.net/BTxP6/1

Answer 2

Проблема на самом деле принадлежит вам .timeline-divider, а не взаимодействию с контейнером div .complete. Вы можете изменить разметку? Если это так, вы сможете исправить свою проблему, просто обернув два нижних элемента в другой div:

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

Другими возможными исправлениями было бы добавление пустого div выше .timeline-divider или перемещение img ниже двух чисел и сделать его clear: both; По общему признанию ни одно из этих решений не особенно идеально, но они будут работать.

Стоит также отметить, что это на самом деле довольно хорошо документированная ошибка .

Answer 3

Добавить положение: относительное; Z-индекс: 0; в .timeline-контейнер

Родительский тег, а затем присвойте z-индекс вашему изображению> 0

http://jsfiddle.net/5wsbC/

Надеюсь, это поможет