在使用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. phantomjs 渲染

    phantomjs 可以将web页面渲染并保存为扩展名为PNG,GIF,JPEG,PDF的指定文件 render viewportSize可以改变可视窗体大小 zoomFactor调整缩放比例 cli ...

  2. js基础小总结之string&array&object

    一.数据类型之间的转换 string--->number :parseInt(string)/parseFloat(string); 注:在Date中,因为返回值date为单位为ms的字符串,将 ...

  3. iPhone 和Android应用，特殊的链接：打电话，短信，email；

    http://ice-k.iteye.com/blog/1426526 下面的这篇文章主要是说,网页中的链接如何写,可以激活电话的功能. 例如,页面中展示的是一个电话号码,当用户在手机浏览器里面点击这 ...

  4. rsyslog VS syslog-ng，日志记录哪家强？

    还有慢慢摸索,NG的MYSQL配置,我始终没搞好. RSYSLOG则比较容易. 另外,也可以每个RSYSLOG直接入库,不需要经过LOG SERVER..如果有一个大内网的话... 配合LOGANAL ...

  5. 这样就算会了PHP么？-11

    PHP中关于类的基本内容练习: <?php class SportObject{ public $name; public $height; public $avirdupois; public ...

  6. PADSPOWERPCB中怎样去隐藏一些PIN脚

    由于一些板,尤其是U盘等面积很小的板,FLASH中只使用了为数不多的几个PIN,为了可以让其它PIN下面可以走线,增加GND网络的面积,所以实际操作中要隐藏一些PIN.这就需要怎么操作呢! 我们要做的 ...

  7. Keil C51编译及连接技术

    主要介绍Keil C51的预处理方法如宏定义.常用的预处理指令及文件包含指令,C51编译库的选择及代码优化原理,C51与汇编混合编程的方法与实现以及超过64KB空间的地址分页方法的C51实现. 教学目 ...

  8. Qt编程之UI与控件布局

    当然,大家都知道UI界面可以用Qt Designer在约束环境下设置编辑.ui文件,再将.ui文件转换成对应的ui_XXX.h文件,这头文件中的内容是:用C++语言实现真正的界面布局.uic -o & ...

  9. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  10. Thinkphp将中文年份转换为数字年份的问题

    今天遇到一个问题:想将中文年份转换为数字年份,例如:"二零一六"-->'2016'. 在网上搜了一下,没找到可以直接处理的函数(也许是我搜索信息的能力有限吧>_< ...