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

CSS样式表
css对边框的属性控制和链接的伪类选择器
css对于颜色和文本属性的控制
HTML和CSS的关键:盒子模型(Box model)
CSS网页布局全精通
css教程:css指令,兼容,注释,selector
DIV+CSS网页布局的基础知识整理
门户网站构建CSS框架的规则
8个优秀的CSS实现数据图表的应用实例
CSS3 有关的问题
css实用技巧及必须得注意的事项
CSS在网页放置注意的两个问题
学习CSS值得去的几个英文网站
IE与FF不兼容网页布局CSS问题
CSS教程:完美的绝对底部
CSS样式表渐进增强的应用
CSS3五个技巧给你的网站带来出色的效果
CSS实例:CSS的10个方法和技巧
相对完美的CSS绝对底部
CSS3中的5个有趣的新技术
Webjx收集的30个CSS导航及菜单教程

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 63 ::
收藏到网摘: 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的自动扩展问题了。所以看着办吧。