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

在一个大的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;
}

时间: 2024-10-02 10:22:46

DIV背景图片在Firefox下不显示通过overflow:auto可解决的相关文章

image-android背景图片可以在Eclipse中显示但是不能在仿真器中显示

问题描述 android背景图片可以在Eclipse中显示但是不能在仿真器中显示 我创建了一个背景图片,然后给下拉文件夹(low, med, high resolution)的每一项添加一个图像的副本,然后在 main.xml 中定义下面的代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ap

div 背景图片读不出来

问题描述 div 背景图片读不出来 划红线地方,读不出背景图片是什么原因,请问我这样设置路径有啥问题,正确的设置应该是怎样,求助 解决方案 尼玛,能不能别这么闹! 解决方案二: 你可以在浏览器的审查元素中,看看这个图片地址是否可以访问到图片,然后再设置repeat scroll等看看 解决方案三: web项目的路径问题 解决方案四: 路径有./的?我以为一般都是../ 解决方案五: 代码没问题,换一个浏览器就ok,是不是IE版本太低,我以前也出现过这个问题.

前端-为什么页面背景图片在电脑上能显示但是在手机上却显示不出?

问题描述 为什么页面背景图片在电脑上能显示但是在手机上却显示不出? #mylotterylist li { min-height: 140px; /*margin-top: 20px; padding-top: 20px;*/ /*padding-left: 12%;*/ list-style: none; cursor: pointer; background: url(../img/listbg.png) repeat-x; } 这里我为 设置了背景图片,然后在建立了html文件, 在电脑上

css 如何让背景图片拉伸填充避免重复显示

如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景. 但

如何解决邮件中的背景图片在outlook2007中不能显示

问题描述 哥们这几天在公司网站的邮件,所有的邮件在outlook2007中背景图片不显示,原因是outllok2007对css的某些属性不支持,我的这段代码是:<tdbackground=http://localhost:8080/images/bg_godigg.gifstyle="background-repeat:no-repeat;"></td>请问各位有什么办法能让背景图片显示出来???在线求解!!! 解决方案 解决方案二:路过,帮顶解决方案三:Wor

IE,firefox下使用CSS属性overflow的存在的不同

首先建立一个HTML文件用于测试用,代码如下: <div> <pre><code> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/"

Flexigrid在IE下不显示数据的处理的解决方法_javascript技巧

解决方法:   网上的答案经我验证都是不靠谱的,以后大家就知道了,Flexigrid在IE下不显示数据的处理方法是:指定一下Ajax请求数据的方式为Get方式 另外,flexigrid不是不可以使用"post"方式发送数据,而是"post"方式在IE下必须要有供post的数据,比如在分页的时候可以使用post方式,而在你没有什么数据要发送的话,一定要使用"get"方式,其它浏览器可能对这个要求不严格,而IE要求较严:

让GoogleCode的SVN下的HTML文件在FireFox下正常显示._javascript技巧

今天试了下发现GoogleCode提供的SVN中的HTML在Firefox中显示为HTML源文件 Google了一下,找到了答案: 如果正常显示需要在SVN提交文件时设置svn:mime-type 为 text/html.(http://blog.pluskid.org/?p=70) SVN客户端都支持自动配置具体配置方法如下(http://www.worldhello.net/wiki/SVN) -------------------------------------- 6.2 新增文件的属

FireFox下XML对象转化成字符串的解决方法_javascript技巧

解决方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xml转化成字符串</title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language=&qu