在使用div+css进行网页布局时，如果外部div有背景颜色或者边框，而不设置其高度，在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。网上查找资料之后主要原因如下：由于在Firefox和opera中：如果里面的DIV是浮动的（float）而母体不会去计算子体float之后的height。而在 IE中支持这种计算，所以IE下正常。

解决方法：
给外部div直接设置高度（不推荐），因为很多时候我们并不知道外部div的高度，我们希望靠里面的div来根据内容自动抻开外边的div，除非你确定的知道外部的div的高度的情况下，所以不建议使用这种方法。
方法一：
在内部每个div后加一个清除浮动（推荐），这样firefox和opera就把里面不当成浮动，会自动计算内部div高度
<div class="outer">

<div class="inner1"></div>
  <div class="inner2"></div>
  <div style="clear:both;"></div>
</div>
方法二：
在.outer中加一句overflow:hidden;
overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度，并且高度小于内层占的实际高度，则内层一部分内容会被隐藏。

主要想强调的一点是，前面中提到的IE中能够正常显示仅限ie6，在之后的版本中同样也无法设置显示背景颜色。

上面的示例中必须给子元素其中之一添加高度，不然还是无法正常显示背景颜色。实际测试时宽度为0，但父元素的背景颜色可以正常显示。示例代码：

<!doctype html>
<html>
    <head>
        <title>多列浮动</title>
        <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
        <style type="text/css" media="screen">
            body{
                margin:0;
                padding:0;
                text-align:center;
            }

#menu{
                width:800px;
                margin:0 auto;
                text-align:left;
                background:#ccc;
            }
            #menu ul{
                float:left;
                margin:0px;
                padding:0px;
                list-style:none;
            }
            #menu ul li{
                float:left;
                width:99px;
                display:block;
                line-height:30px;
                text-align:center;
            }
            #menu .menudiv{
                float:left;
                width:1px;
                height:20px;
                background:#888；
                margin-top:5px;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#">菜单一</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单二</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单三</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单四</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单五</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单六</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单七</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单八</a></li>
                <li class="menudiv"/>
            </ul>
        </div>
    </body>
</html>

里面id为menu的元素虽然定义了背景颜色，但是由于子元素都设置了float属性，所以无法正常显示背景颜色。

解决方法一：给menu加上overflow:hidden;

解决方法二：直接在menu内ul外面添加<div style="clear:both;"></div> 就是说添加清除浮动的子元素即可

参考资料：http://lovephpor.blog.51cto.com/1850499/563540

div没有设置高度时背景颜色不显示(浮动)的更多相关文章

  1. Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法

    今天在排版的时候,外层的div不写高度的话背景颜色和边框没法办法显示,但是在IE下面就可以,这个有三个解决办法. 第一: 直接给最外层的div设置高度(不推荐). 第二: 在内部每个div后添加一个清 ...

  2. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  3. div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...

  4. 设置 tableview 的背景 颜色 和清空

    表示图中Cell默认是不透明的,那么在设置表示图的背景颜色和图片时通常是看不到的 1.给tableView设置背景view UIImageView *backImageView=[[UIImageVi ...

  5. linux BASH shell设置字体与背景颜色

    linux BASH shell下设置字体及背景颜色的方法. BASH shell下设置字体及背景颜色  echo -e "\e[31mtest\e[41m"  \e[30m 将字 ...

  6. linux BASH shell下设置字体及背景颜色

    BASH shell下设置字体及背景颜色 echo -e "\e[31mtest\e[41m" \e[30m 将字符的显示颜色改为黑色 \e[31m 将字符的显示颜色改为红色 \e ...

  7. html中如何实现表格移入移出时背景颜色改变？（两种方法）

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  8. iOS 设置状态栏的背景颜色

    设置状态栏的背景颜色 - (void)setStatusBarBackgroundColor:(UIColor *)color { UIView *statusBar = [[[UIApplicati ...

  9. VC编程中如何设置对话框的背景颜色和静态文本颜色

    晚上编一个小程序,涉及到如何设置对话框的背景颜色和静态文本颜色.这在VC6.0中本来是一句话就搞定的事.在应用程序类中的InitInstance()函数添加: //设置对话框背景和文本颜色 SetDi ...

随机推荐

  1. DTO学习系列之AutoMapper（五）----当EntityFramework爱上AutoMapper

    有时候相识即是一种缘分,相爱也不需要太多的理由,一个眼神足矣,当EntityFramework遇上AutoMapper,就是如此,恋爱虽易,相处不易. 在DDD(领域驱动设计)中,使用AutoMapp ...

  2. java实现简单的单点登录

    java实现简单的单点登录 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现 ...

  3. (转) Python in NetBeans IDE 8.0

    原地址: https://blogs.oracle.com/geertjan/entry/python_in_netbeans_ide_8 Copy this to the clipboard: ht ...

  4. ​C语言数组作为函数参数

    数组可以作为函数的参数使用,进行数据传送. 数组用作函数参数有两种形式,一种是把数组元素(下标变量)作为实参使用:另一种是把数组名作为函数的形参和实参使用. 数组元素作函数实参 数组元素就是下标变量, ...

  5. jquery 1.9 之后toggle不能用的问题

    今天用到toggle这个方法,发现不是自己想要的效果,之前有用过好多次,一直都没有问题. 网上查了原因,才知道是版本的问题,jquery1.9之后toggle取消了.那么如果想要继续用toggle的这 ...

  6. java-web-dom4j解析XML-递归方式

    <?xml version="1.0" encoding="UTF-8"?><书架>  <书 出版日期="2013-10 ...

  7. linux 文件类命令笔记

    看一下linux的教程,不错,由于只看鸟哥有点空洞,于就是找了个视频教程,边看边学 对比了几个教程,http://edu.51cto.com/course/course_id-32.html这个教程相 ...

  8. Java中读取文件

    Java中读取文件,去除一些分隔符,保存在多维数组里面 public void readFile(String filePath) { File file=new File(filePath); Ar ...

  9. Doxygen安装使用

    Doxygen是一个 C++.C.Java.Objective-C.Python.IDL(CORBA和Microsoft flavors).Fortran.VHDL.PHP.C#和D语言的文檔生成器. ...

  10. 我的Android4.3新书即将上市，谢谢大家的支持

    首先感谢清华大学.电子工业.机械工业.人民邮电等各大出版社对本书的肯定.我想说中国的IT业如果没有你们的辛勤工作,是不会发展得这么快的.经过再三权衡,本书将选择人民邮电出版社于近几个月在全国出版发行. ...