我有这个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 感觉不到容器溢出.. 谁能帮我?? 谢谢。
最佳答案
我建议在您的 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 标准且与浏览器兼容。
:)
关于html - CSS IE问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5552944/