css IE проблема

Question

У меня есть этот HTML

<div class="p-box">
        <div class="p-img"></div> 
        <h3>title</h3>
        <div class="txt">some txt</div>
     </div>

с этим css.

    .p-box {
    width:253px;
    height:155px;
    position:relative;
    float:left;
    overflow:hidden;
    background: url(../images/p-box-bg.png) top left no-repeat;

}
.p-box h3 {
    color:#FFF;
    width:253px;
    text-align:center;
    font-size:12px;
    height:22px;
    line-height:22px;
    display:block;
}
.p-img {
    position:absolute;
    top:1px;
    left:1px;
    width:253px;
    height:155px;
    z-index:5;
    background: url(../images/p-img-bg.png) top left no-repeat;

}
.p-box .txt{
    width:249px;
    height:20px;
    background: url(../images/p-img-txt-bg.png) top left no-repeat;
    position:absolute;
    bottom:2px;
    left:2px;
    z-index:50;
    text-align:right;
    color:#FFF;
    font-size:12px;
    line-height:20px;

}

В firefix все нормально, но в IE я не вижу свой H3 поверх p-img, а p-img не чувствует переполнение контейнера .. Может кто-нибудь мне помочь?? Thx.

Answer 1

Я бы порекомендовал на вашем H3 установить что-то более конкретное, а именно: идентификатор. После этого установите фоновое изображение в новом теге id, а не в элементе H3 в css. так:

.p-box #h3image {
    color:#FFF;
    text-align:center;
    font-size:12px;
    display:block;
    enter code here
    width:253px;
    height:22px;
    padding-top: 133px;
    z-index:5;
    background: url(../images/p-img-bg.png) top left no-repeat;
}

Обратите внимание, что отступ 133 px + высота 22px сделает всю высоту контейнера 155px; быть размером вашего изображения. Так как отступ сверху 133, для текста останется 22 пикселя, поскольку изображение является фоном, текст на переднем плане, полностью совместим с SEO и совместим с браузером.

:)

Answer 2

Поскольку некоторые статьи ссылаются на ошибку z-index в IE, присвойте элементу h3 высокий z-индекс (по крайней мере, выше, чем z-index = 5, данный .p-img).