css IE问题

发布于 2024-10-30 02:14:54 字数 1113 浏览 1 评论 0原文

我有这个 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 感觉不到容器溢出。有人可以帮助我吗？谢谢。

原文

I have this html

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

with this 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;

}

In firefix all ok, but in IE i can't see my H3 over the p-img and p-img don't feel the container overflow..
can anyone help me??
Thx.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

影子的影子 2024-11-06 02:14:54

我建议您在 H3 上将其设置为更具体的内容，即：一个 id。完成后，在新的 id 标签中设置背景图像，而不是 css 中的 H3 元素。 so：

.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 133 px + height 22px 将使容器的整个高度为155px；是你的图像的大小。由于顶部的内边距为 133，这将为文本留出 22 像素，因为图像是背景，文本位于前景，完全符合 seo 标准且与浏览器兼容。

I would recommend on your H3, set it to something more particular, ie: an id. Once done, set the background image in the new id tag, not the H3 element in css. so:

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

Note that the padding-top 133 px + height of 22px will make the entire height of the container 155px; being the size of your image. As the padding from the top is 133, this will leave 22px for the text to be in place, as the image is a background, text is in the foreground, fully seo compliant and browser compatible.

回复收藏 0 原文