不定高度的div背景或背景图片不显示问题
在使用div+css进行网页布局时，如果外部div有背景颜色或者边框，而不设置其高度，在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。
大体结构
<style>
.a1 {width:100px;background:red;}
.b1 {background:blue;width:50px;height:600px;}
</style>
</head>
<body> <div class="a1">
<div class="b1"></div>
</div> </body>
原因分析：由于在Firefox和opera中：如果里面的DIV是浮动的（float）而母体不会去计算子体float之后的height。而在 IE中支持这种计算，所以IE下正常。
所以出现这种问题有两个前提：1.外部div没有设置高度；2. 内部div是浮动的（带有float属性）。
一般，我们不确定外部div的高度，所以我们要清除浮动。
实现在div自增长后，其内的背景色或图片如何随之增长。
.a1{
width:100px;background:red;
height:auto !important;
height:550px;
min-height:550px;}
.a1:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
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背景或背景图片不显示问题的更多相关文章
- Lodop背景图无图片时显示放大叉号问题
正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...
- div+css+javascript 走马灯图片轮换显示
效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 【CSS】div的背景图完整图片覆盖
最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...
- 未知高度的div自适应图片高度
<div style="background-image: url(http://your-image.jpg);"> <img src="http:/ ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS3之让背景图片全部显示
起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...
- background属性冲突导致的部分浏览器背景图片不显示问题
前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...
- 关于Viual Studio 改变编辑器背景背景及背景图片（转）
Visual Studio背景颜色或者背景图片是可以修改的,根据个人的爱好进行相应的修改 首先先展示下效果: 修改方法如下: 1.在工具-扩展和更新-联机,此时他会自动搜索,暂时让他自己搜索去吧,这里 ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
随机推荐
- C# 值类型和引用类型的区别
C# 值类型和引用类型的区别 1. 值类型的数据存储在内存的栈中:引用类型的数据存储在内存的堆中,而内存单元中只存放堆中对象的地址. 2. 值类型存取速度快,引用类型存取速度慢. 3. 值类型表示实 ...
- 【USACO】【Section1.1】Greedy Gift Givers
小白题,也没啥好说的.关键我的算法感觉特别菜的一点是每次要遍历数组从人名找对应的编号,这个效率就很低了.看了ANALYZE里面也是这样的.不过它比我好的一点是我多余设置了initial_money变量 ...
- GMT与UTC
时间概念 — 24时区.GMT.UTC的意涵 许多人都知道两地时间表简称为GMT或UTC,而世界时区表则通称为World Time ,那么GMT与UTC的实质原意又是为何?世界时区又是怎么区分的?面盘 ...
- java日期格式的转换
1.转换指定格式的日期 /** * 日期格式转换 * @throws ParseException */ public String dateformat(String date,String tab ...
- CodeForces Round #297 Div.2 E (中途相遇法)
当时打比赛的时候卡在D题了,没有看E.现在看来E还是不难的. 将n个数排序后,其实不排序也是可以的,只是排序能快一半的时间. 枚举前一半能得到多少种和,放到map里面: 然后在后一半数中枚举,然后在m ...
- 51nod1711 平均数
二分答案.check有多少个区间的平均数>xbi=ai-x;将sm离散化.然后logn求出有多少个小于sm[i].类似于求逆序对的思路. 一直WA一个点...所以我就下载数据特判了TAT #in ...
- ASP.NET 4的Demo实践:URL路由改进支持
从.NET框架3.5 SP1开始,微软推出了ASP.NET路由支持,从而实现了特定资源的URL与其对应的Web服务器上的物理文件之间的彻底解耦.借助于ASP.NET路由支持,开发人员可以定义一组路由规 ...
- How to: Modify a Project System So That Projects Load in Multiple Versions of Visual Studio
http://msdn.microsoft.com/en-us/library/hh266706(v=VS.110).aspx
- A*寻路初探 GameDev.net 转载
A*寻路初探 GameDev.net 译者序:很久以前就知道了A*算法,但是从未认真读过相关的文章,也没有看过代码,只是脑子里有个模糊的概念.这次决定从头开始,研究一下这个被人推崇备至的简单方法,作为 ...
- Dom对象的方法应用一getElementById技巧、getElementsByName() IE，firefox兼容
在document对象中有以下三个方法,对于程序员来说,真可谓无人不知,无人不晓,他们分别是: 1.getElementById() 返回对拥有指定 id 的第一个对 ...