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

CSS样式表
css ID类和class类的长命名与短命名
CSS background-position的使用说明详解
利用CSS定位背景图片 background-position
CSS 多图片融合背景定位的应用于优缺点分析
CSS实现的图片宽高自适应固定边框
css 背景图片定位在菜单效果中的应用实例
CSS 速记口诀 可以解决一些常见问题
CSS 多浏览器兼容性问题及解决方案
css 行级元素在多浏览器下的宽度问题 与解决方法
IE下行框高度的问题
CSS 实现的图片宽高自适应固定边框
css的核心内容 标准流、盒子模型、浮动、定位等分析
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
Div+CSS 布局入门教程之二 构建网站
CSS 网页布局中文排版的9则技巧
CSS网页布局25个实用小技巧
网页制作 默认Web字体样式
IE与Firefox的CSS兼容大全 推荐
css 非表格垂直对齐效果代码
css cursor 的可选值（鼠标的各种样式）

No. « 110 111 112 113 »

技术文章搜索

关键字

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

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