在IE和Firefox中背景图片高度自适应的兼容问题
例如:(其中floatA、floatB的属性已经设置为float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
在
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
之间加上
<#div class="clear"></#div>
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
.clear{
clear:both;}
此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
#main{background:url(images/main_bg.jpg) repeat-y top left;width:996px;height:auto;overflow:hidden}
.content{float:left;padding:0 20px 5px 132px;width:505px;border:1px solid #FF0000;}
.sidebar{float:right;padding-right:132px;width:196px;border:1px solid #0000FF;}
其中不加这overflow:hidden句,在IE中能自动适应背景图片的高度,但是在FF中不能自动适应背景图片的高度,显示的是背景颜色,但是加了这句就可以实现在FF中也自动适应背景图片,即背景随文本内容的增加而自动增加
在IE和Firefox中背景图片高度自适应的兼容问题
最新推荐文章于 2021-06-22 08:46:09 发布