html - 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 中我无法通过 p-img 看到我的 H3 并且 p-img 感觉不到容器溢出..谁能帮我？？谢谢。

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

注意padding-top 133px + height of 22px会让容器的整个高度为155px；是你的形象的大小。由于从顶部开始的内边距为 133，这将为文本留出 22 像素，因为图像是背景，文本在前景中，完全符合 seo 标准且与浏览器兼容。

:)