网页制作 
首页 > 网页制作 > 浏览文章

DIV背景图片在Firefox下不显示通过overflow:auto可解决

(编辑:jimmy 日期: 2024/9/21 浏览:3 次 )
在一个大的div里有2个横列(DIV),并且在大的div里加入背景图片。可是改好后,在Firefox下却无法正确显示背景图片。代码是这样的:
1.HTML(样本):

复制代码代码如下:
<div id="footer">
<div id="footer_left">Content1</div>
<div id="footer_right">Content2</div>
</div>

2. CSS:

复制代码代码如下:
#footer {
width:730px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
}
#footer_left {
float:left;
width:230px;
}
#footer_right{
float:left;
width:500px;
}

此代码是左右两栏排版,利用父DIV(footer)的背景图片做子DIV(footer_left)的背景,来达到左右两栏高度对齐。
解决办法:
这是因为你的#footer_left 和#footer_right加了float:left,在FF里如果里面的元素加了float:left(right),它就不会被撑开的,也就是说的它的高度是0,如果正常显示,必须加上:overflow:auto,
即:

复制代码代码如下:
#footer {
width:730px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
overflow:auto;
}
上一篇:IE6下图片下方有空间距的多种解决方法
下一篇:list-style-image无法准确定位通过(li的背景模拟或相对定位)解决
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap