当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS设置的背景图片在IE7中点击消失

CSS样式表
网页设计关于WEB标准的相关问题汇总
项目管理:交互-设计-制作三个角色的组合
学习CSS制作网页总结的一些经验
多个CSS样式表争夺特定选择符的控制权
网页设计制作CSS实现隔行换色两种方法
CSS教程:DIV底部放置文字
CSS教程:CSS命名参考
CSS教程:控制网页文件大小通过精简CSS实现
CSS教程:关于文字溢出问题的研究
符合web标准的嵌入Flash的方法
学习WEB标准必备的四项技能
CSS对表格单元格强制换行和不换行
CSS制作符合网站标准的细线表格
区分IE6,IE7和firefox的CSS hack
CSS教程:学习CSS的继承性
CSS教程:CSS兼容的技巧
CSS教程:浮动元素对浏览器的支持
闭合浮动元素让CSS代码更规范
深入分析网页CSS隐藏文字和以图换字技术
看懂《CSS hack浏览器兼容一览表》

No. « 10 11 12 13 »

技术文章搜索

关键字

CSS样式表 中的 CSS设置的背景图片在IE7中点击消失

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-03   浏览: 60 ::
收藏到网摘: n/a

在div+css中的时候你可能会遇见这样的情况，ie6和ff浏览器下面某个div的背景是可以正常显示的，但是ie7下却无端失踪了背景！？？？什么回事？原因很简单.假如css的盒子模型下，以下html代码:

<div class="foot">
<div class="font"><a>font</a></div>
<div class="font2"><a>font2</a></div>
</div>

被设置的css代码为：

.foot{
margin-top:30px;
padding-top:100px;
border-bottom:10px solid #000;
background:url(img.jpg) no-repeat;//img.jpg高为100px
}
.font{
padding:5px
}
.font2{
padding:10px
}

根据盒子模型，这个foot的div所占据的竖直方向的空间为30+100+10+里层div占据空间>140px，理论上除去上间隙的30px和下边框的10px剩下的填充+子层占据的空间里面应该可以出现高为100px的背景img.jpg，实际上IE6跟FF上面也出现了，但是IE7会因为foot(class是foot的div)里面的div(这里指的是font和font2)并没有设置高度而认为foot的高度是0，因此背景图片是看不见的。
解决办法就很简单了：设置里层div高度（或者让里层div被撑大）或者直接设置foot的高度。当然直接设置foot的高度的话，里面子层div竖直占位发生变化，甚至超出foot范围时，就又要考虑div的自动扩展问题了。所以看着办吧。