div不设置高度背景颜色或外边框不能显示
2013-01-18 11:20
666 查看
针对这种问题,是因为各个浏览器的w3c标准不同,造成的不同浏览器之间的差异问题:
1.首先贴上代码:
在IE7中显示的结果是:
最外层的div显示是正常的,背景颜色可以显示出来,但是在IE8,IE9和火狐中显示的结果是:
这是因为里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在IE6/7中支持这种计算,所以IE下正常。
所以出现这种问题有两个前提:
1.外部div没有设置高度;
2. 内部div是浮动的(带有float属性)。
那么解决方案就是:给外层的div设置高度(不推荐),因为只有在确定外层div的高度是多少的时候,这种方法才是可取的,但是大多数情况下,我们都希望外层div能够自动计算内部div的高度,然后填充,所以
方法一:
在内部最后一个FLOAT的div后加一个清除浮动(推荐),这样firefox和IE8/9就把里面不当成浮动,会自动计算内部div高度
方法二:(这种方法是百度的时候从别人的博客中看到的,我试过,挺管用)在最外层div中加入属性"overflow:hidden;";
1.首先贴上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .fotio{background:#0000CC; zoom:1; /* IE */} .fotio:after {content:".";height:0; line-height:0; font-size:0; } .ovosudsaca{ float:left; height:100px; width:200px; background:#CCCCCC;border:1px solid red;} </style> </head> <body> <div class="fotio"> <div class="ovosudsaca"></div> <div class="ovosudsaca"></div> </div> </body> </html>
在IE7中显示的结果是:
最外层的div显示是正常的,背景颜色可以显示出来,但是在IE8,IE9和火狐中显示的结果是:
这是因为里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在IE6/7中支持这种计算,所以IE下正常。
所以出现这种问题有两个前提:
1.外部div没有设置高度;
2. 内部div是浮动的(带有float属性)。
那么解决方案就是:给外层的div设置高度(不推荐),因为只有在确定外层div的高度是多少的时候,这种方法才是可取的,但是大多数情况下,我们都希望外层div能够自动计算内部div的高度,然后填充,所以
方法一:
在内部最后一个FLOAT的div后加一个清除浮动(推荐),这样firefox和IE8/9就把里面不当成浮动,会自动计算内部div高度
<div class="fotio"> <div class="ovosudsaca"></div> <div class="ovosudsaca"></div> <div style="clear:both;"></div> </div>
方法二:(这种方法是百度的时候从别人的博客中看到的,我试过,挺管用)在最外层div中加入属性"overflow:hidden;";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .fotio{background:#0000CC;overflow:hidden; zoom:1; /* IE */} .fotio:after {content:".";height:0; line-height:0; font-size:0; } .ovosudsaca{ float:left; height:100px; width:200px; background:#CCCCCC;border:1px solid red;} </style> </head> <body> <div class="fotio"> <div class="ovosudsaca"></div> <div class="ovosudsaca"></div> </div> </body> </html>
相关文章推荐
- div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法 (新浪博客 )
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法
- div+css div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF、IE7下div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
- Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法
- div没有设置高度,背景颜色却无法显示
- div没有设置高度时背景颜色不显示(浮动)
- div没有设置高度,背景颜色却无法显示
- div没有设置高度,背景颜色却无法…
- UIButton在设置不能交互的情况下如何让背景图片显示正常颜色。
- IE兼容问题之一:table--td设置背景颜色or背景图片,border不能正常显示(用的框架是layui)
- JavaScript基础 通过style属性设置div的高度,宽度,背景颜色
- JavaScript基础 通过style属性设置div的高度,宽度,背景颜色
- div没有设置高度,背景颜色却无法…
- 未设置高度的容器背景和边框不显示问题(CSS)
- ie6 几个li上下排列会闪动的问题,嵌套div—外层div内层div都设置背景颜色,内层div背景色不显示的问题