日期:2014-01-08 浏览次数:20966 次
在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的自动扩展问题了。所以看着办吧。