div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决 css div边框样式

在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。

大体结构
<div>
<div></div>
<div></div>
</div>
css文件:(只写出了最主要的部分css代码:定义了最外层div的背景颜色和边框,同时定义了里面的div是浮动的)
.outer{border:#F00 1px solid; background:#FF9 repeat;}
.inner1,.inner2{float:left;}
在IE中显示正常,如图1

(图1)
在FF中显示不正常,边框线和背景色都不能正常显示,如图2

(图2)

从网上查阅了一些资料,才对这个问题有了大体的认识。

原因分析:由于在Firefox和opera中:如果里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在IE中支持这种计算,所以IE下正常。

所以出现这种问题有两个前提:1.外部div没有设置高度;2.内部div是浮动的(带有float属性)。

解决方法:
给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决 css div边框样式
方法一:
在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
<div>
<div></div>
<div></div>
<div></div>
</div>
方法二:
在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的)
overflow属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。

  

爱华网本文地址 » http://www.aihuau.com/a/25101011/43201.html

更多阅读

不能显示隐藏文件怎么办 电脑不能显示隐藏文件

电脑不能显示隐藏文件,在文件夹选项里调了,关了对话框重开又返回到不显示隐藏文件选项。这是中“标”了;不过有办法解决,见下:不能显示隐藏文件怎么办——步骤/方法不能显示隐藏文件怎么办 1、运行regeditHKEY_LOCAL_MACHINE | Software

Win7系统修改hosts文件不能保存的解决方法 精 苹果系统hosts文件

由于软件注册的原因,我需要更改hosts文件来防止服务器验证!那么在我们修改这个文件的时候,修改完成之后发现保存不了,这种情况我们该怎样解决呢,难道就不能修改了吗?下面我们一起看看解决的方法吧!Win7系统修改hosts文件不能保存的解决

DNF掉落物品不显示的解决方面 dnf怎么移动掉落物品

DNF掉落物品不显示的解决方面——简介有时候我们会发现刷图过程中,看不到装备掉落,而且按了默认的CTRL键,还乱按了一些其他的键位也不起作用,这时候我们就要系统设置一下了。DNF掉落物品不显示的解决方面——方法/步骤

DZ论坛移动后用户头像不显示的解决办法 dz论坛头像包

我用个DZ论坛,从一个服务器上,移到了另一个服务器上,用户登录上去,数据读取无误,但是会员头像处,不能显示,打叉!登录后台,发现点击“UCenter”不能显示,提示“Not Found。。。”错误!无所谓,不能用“UCenter”无非是有些数据(如改用户名什么的)改

声明:《div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决 css div边框样式》为网友睡不着的深夜分享!如侵犯到您的合法权益请联系我们删除