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。完成后，在新的id标签中设置背景图像，而不是在css中设置H3元素。这样：

.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，所以文本将保留22px，因为图像是背景，文本在前景，完全符合SEO并且与浏览器兼容。

：）

Answer 2

当some articles暗示IE的z-index错误时，给h3元素一个高z-index（至少高于给{{1}的z-index = 5 }）。