在使用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. 如何禁止C++默认生成成员函数

    前言: 前几天在一次笔试过程中被问到c++如何设计禁止调用默认构造函数,当时简单的想法是直接将默认构造函数声明为private即可,这样的话对象的确不能直接调用.之后查阅了<Effective ...

  2. MYSQL 磁盘临时表和文件排序

    因为Memory引擎不支持BOLB和TEXT类型,所以,如果查询使用了BLOB或TEXT列并且需要使用隐式临时表,将不得不使用MyISAM磁盘临时表,即使只有几行数据也是如此. 这会导致严重的性能开销 ...

  3. 动态编译添加php模块

    注意:转载请注明出处:http://www.programfish.com/blog/?p=85 在很多时候我们用linux里搭建web服务器的时候会需要编译安装php套件,而在编译安装后可能又会需要 ...

  4. linux服务器wget无法成功解析域名及程序获取外网数据不稳定问题

    1.问题描述: 1.1 最近发现通过linux服务器wget下载远程文件经常提示无法解析域名问题,要重复多次才能成功,成功率比较低. 1.2 PHP用file_get_contents()函数获取淘宝 ...

  5. Xshell4连接Linux后 win快捷键锁屏

    今天在使用Xshell连接CentOS后 使用Vim编辑器编辑完后 习惯性的按了Ctrl+S 然后按什么都不起作用 只能重新连接 通过查资料得知 Ctrl + S 是Linux 锁屏的快捷键 要解除锁 ...

  6. C语言解析日志，存储数据到伯克利DB

    编译命令 gcc -o dbwriter dbwriter.c -ldb dbwriter.c #include <assert.h> #include <stdlib.h> ...

  7. (摘) MDI登陆问题

    MDI编程中需要验证用户身份,那么登陆窗口就需要在验证密码后进行相关的隐藏处理. (1)隐藏登陆窗口(登陆窗体作为启动) 登陆按钮事件:this.Hide();//隐藏登陆窗口MDI_Name M = ...

  8. 《Programming WPF》翻译 第3章 1.什么是控件

    原文:<Programming WPF>翻译 第3章 1.什么是控件 对于一个应用程序而言,控件是搭建用户界面的积木.它们具备交互式的特征,例如文本框.按钮以及列表框.尽管如此,WPF还有 ...

  9. Swing透明和变换

    以前或许大家对一个UI组件是否透明没有那么关心,但是自从Vista的毛玻璃出现后,UI透明就成了大家非常关注的一个话题,于是Java阵营开始了铺天盖地的讨论如何实现透明的效果,但是很不幸的是无论组件如 ...

  10. hihoCoder 1098

    题目大意:n 个城市由 m 条边连接,每条边有权值,求将所有城市连接起来时的最小权值和. 代码: #include<iostream> #include<cstdio> #in ...