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

大体结构

  1. <style>
  2. .a1 {width:100px;background:red;}
  3. .b1 {background:blue;width:50px;height:600px;}
  4. </style>
  5. </head>
  6. <body>
  7.  
  8. <div class="a1">
  9.     <div class="b1"></div>
  10. </div>
  11.  
  12. </body>

原因分析：由于在Firefox和opera中：如果里面的DIV是浮动的（float）而母体不会去计算子体float之后的height。而在 IE中支持这种计算，所以IE下正常。

所以出现这种问题有两个前提：1.外部div没有设置高度；2. 内部div是浮动的（带有float属性）。

一般，我们不确定外部div的高度，所以我们要清除浮动。

实现在div自增长后，其内的背景色或图片如何随之增长。

  1. .a1{
  2. width:100px;background:red;
  3. height:auto !important;
  4.     height:550px;
  5.     min-height:550px;}
  6.  
  7. .a1:after {
  8.     content:".";
  9.     height:0;
  10.     visibility:hidden;
  11.     display:block;
  12.     clear:both;
  13.     }

1.在Div末尾加入代码： 

<div style="clear:both;"></div>

或者使用

<br style="clear:both;" />

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

代码如下:


#a1:after{ 

content:"."; 

height:0; 

visibility:hidden; 

display:block; 

clear:both; 

} 

3.设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

4.浮动外部元素，float-in-float

这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。

不定高度的div背景或背景图片不显示问题的更多相关文章

  1. Lodop背景图无图片时显示放大叉号问题

    正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...

  2. div+css+javascript 走马灯图片轮换显示

    效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  3. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

  4. 未知高度的div自适应图片高度

    <div style="background-image: url(http://your-image.jpg);"> <img src="http:/ ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. CSS3之让背景图片全部显示

    起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...

  7. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

  8. 关于Viual Studio 改变编辑器背景背景及背景图片（转）

    Visual Studio背景颜色或者背景图片是可以修改的,根据个人的爱好进行相应的修改 首先先展示下效果: 修改方法如下: 1.在工具-扩展和更新-联机,此时他会自动搜索,暂时让他自己搜索去吧,这里 ...

  9. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

随机推荐

  1. PHP dirname() 返回路径中的目录部分basename() 函数返回路径中的文件名部分。

    dirname (PHP 4, PHP 5) dirname — 返回路径中的目录部分说明string dirname ( string $path ) 给出一个包含有指向一个文件的全路径的字符串,本 ...

  2. Test Tools

    1. http://www.dummytextgenerator.com/: Generate dummy text 2. fsutil file createnew D:\New.txt 1024: ...

  3. 通过CSS让html网页中的内容不可选

    *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...

  4. java操作office和pdf文件页面列表导出cvs，excel、pdf报表.

    在平常的开发中我们常常遇到不仅仅只是导出excel报表的情况.有时候也需要导出pdf或者CSV报 表.其实原理都差不多.刚开始本来不打算也这篇博客介绍这个的.感觉这篇博客和前面的博客有点雷同.原理基本 ...

  5. Android 工程在4.0基础上混淆

    Android现在对安全方面要求比较高了,我今天要做的对apk进行混淆,用所有的第三方工具都不能反编译,作者的知识产权得到保障了,是不是碉堡了. 一,首先说明我这是在4.0基础上进行的. 先看看pro ...

  6. 《OD学hive》第五周0723

    https://cwiki.apache.org/confluence/display/Hive/LanguageManual 一.创建表 create table student(id int, n ...

  7. 《OD学hive》第四周0717

    一.Hive基本概念.安装部署与初步使用 1. 后续课程 Hive 项目:hadoop hive sqoop flume hbase 电商离线数据分析 CDH Storm:分布式实时计算框架 Spar ...

  8. 【转+分析】JAVA: 为什么要使用"抽象类"? 使用"抽象类"有什么好处?

    老是在想为什么要引用抽象类,一般类不就够用了吗.一般类里定义的方法,子类也可以覆盖,没必要定义成抽象的啊. 看了下面的文章,明白了一点. 其实不是说抽象类有什么用,一般类确实也能满足应用,但是现实中确 ...

  9. apiCloud创建APP项目

    1.注册一个apiCloud账户 2.创建一个应用 3.安装sublime插件 4.用sublime创建应用 5.配置参数,保证一致 6.上传代码,两种方式 一种是压缩成zip 一种是配置svn,通过 ...

  10. JS function的定义方法，及function对象的理解。

    废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...