原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html

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

大体结构
<div class="outer">
  <div
class="inner1"></div>

<div
class="inner2"></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后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度

<div class="outer">

<div
class="inner1"></div>

<div
class="inner2"></div>

<div
style="clear:both;"></div>
</div>
方法二:
在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的)
overflow
属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。

div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)的更多相关文章

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

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

  2. ubuntu下的“用vim打开中文乱码,用cat打开正常显示”的解决方法

    转载 系统环境:ubuntu10.04 vim gvim完全安装 问题:终端下vim中的汉字为乱码,网上搜索了一些解决方案.但是奇怪的是,这些方法都不能实现gvim的菜单和文中汉字,终端vim下的文中 ...

  3. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  4. 在IE6下使用filter设置png背景

    今天帮别人解决问题学会了一个在IE6下使用filter设置png背景,具体css写法如下: .login_form_wrap { width: 778px; height: 360px; backgr ...

  5. Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())

    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...

  6. 改进动态设置query cache导致额外锁开销的问题分析及解决方法-mysql 5.5 以上版本

    改进动态设置query cache导致额外锁开销的问题分析及解决方法 关键字:dynamic switch for query cache,  lock overhead for query cach ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

  8. Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法

    ref from: Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法http://blog ...

  9. 【C#/WPF】Button按钮动态设置Background背景颜色

    学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...

随机推荐

  1. 让你的WPF程序使用多线程——BackgroundWorker

    在wpf中可以使用许多方法执行异步操作.利用.NET的芳芳就是手动创建一个新的System.Threading.Thread对象,提供一步代码,并使用THread.Start()方法加载代码.这种方法 ...

  2. Centos 下搭建SVN + Apache 服务器(转载)

    安装软件包 ? 1 # yum install httpd ? 1 # yum install mod_dav_svn ? 1 # yum install subversion 2.  验证安装 ? ...

  3. 如何在 Arch Linux 中安装 DNSCrypt 和 Unbound

    DNSCrypt 是一个用于对 DNS 客户端和 DNS 解析器之间通信进行加密和验证的协议.它可以阻止 DNS 欺骗或中间人攻击. DNSCrypt 可用于大多数的操作系统,包括 Linux,Win ...

  4. jq 判断输入数字

    jq 判断输入数字 <input   id="N_source" name="N_source"   type="text" valu ...

  5. UVa 11762 - Race to 1

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. struts中拦截器的开发

    1.开发Interceptor类 用户自定义的拦截器一般需要继承AbstractInterceptor类,重写intercept方法 public class UserInterceptor exte ...

  7. xcode6 ios launchimage

    1.点击Image.xcassets 进入图片管理,然后右击,弹出"New Launch Image" 2.右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以及低版本的ios系 ...

  8. sql思维

    写sql的思路不同于常规编程语言(C.python)等等.前者,考虑如何一步步地得到最终答案:后者,考虑如何一步步地收缩数据范围. 简而言之,前者是面向过程化(for each row do x),后 ...

  9. 框架之 spring

    spring有两大特性,其一为ioc,其二为aop 1.ioc的理解 ioc为依赖注入,他的好处就是把创建对象的权利交给spring去管理,这样的好处是 将应用程序中的对象解耦,传统的方式程序中的对象 ...

  10. opencv 工程的保存

    一个项目的保存,只要保存工程底下的.CPP  .h   .dll  .lib  输入输出文件即可 最终保存的文件