欢迎使用CSDN-markdown编辑器
来源:互联网 发布:photoshopcs6 for mac 编辑:程序博客网 时间:2024/05/18 13:25
逐步解决遇到的各种bug,是web前端开发者逐步成长的过程!
今天在做项目时,遇到了ie6下绝对定位元素莫名消失的问题,在此写个简单的例子说明一下此类问题的解决办法。
如果我们想得到如下效果该怎么办呢?
1 首先是基本的布局,此处不细说了。如果我们想让最外面的框具有可扩展性,即红色的框不设置高度,我们该怎么办呢?通常我 们有一下几个办法来解决浮动子标签自动撑开父标签高度的问题:
a 在子标签最后加一个清浮动的div{
b 父标签css样式添加{overflow:hidden;}。
d 给父标签设置float属性。(如果父标签浮动了,可能对布局有影响,需要在父标签外再套一个让整体居中的标签。)
2 通常为了减少工作量,少敲几个代码,我都会选择在父标签css样式中添加{overflow:hidden;}。但今天在做项目时,遇到了麻烦。首先看一下我最初的写法。
</style></head><body><div class="outer"><div class="con1"></div><div class="con2"></div><div class="con3"></div><div class="con4"></div><div class="con5"></div><div class="mask">我是蒙版层</div><div class="clear"></div></div></body>
看一下ie6下效果:
我们会发现蒙版层有一部分被遮住了,且ie6下红色框的底部与里面子元素的空隙也没有了(非ie6中有),也就是说,子元素没有把父元素的高度完全撑开。蒙版层被遮住是因为我们在父标签css样式中添加了{overflow:hidden;}。
为了解决这两个问题,我就把父标签css样式{overflow:hidden;}
删除,并且在最后一个子元素后面添加一个div,
此时chrome中的效果(正常显示)如下:
为了解决这一问题,我在网上搜寻答案,原来这是一个老bug了,大神们给出了答案:绝对定位的元素跟浮动的兄弟标签之间插入一个空的div标签就ok了。至此需要解决的问题解决了。
总结来说,最好的解决方法就是:在最后加入一个清浮动的div(CSS: .clear{clear:both;height:0;overflow:hidden;} HTML:<div class="clear"></div>)
,在绝对定位的元素和浮动元素间加入一个空div<div style="height:0;overflow:hidden;"></div>
。
有趣的现象:在写这个例子的过程中,我发现了一个有趣的现象。如果我们给这个蒙版加个半透明的效果,css样式如下:{opacity:0.5;filter:alpha(opacity=50);}。当我们删除以上所说的那个空div,定位的蒙版层依然存在。也就是说filter滤镜起到了作用。
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- SpringMVC get请求中文乱码
- 赢在职场-WEB全栈开发-1-4background讲解
- C#(FCL)字符串对象的不可变性
- Filter 过滤器
- luci, show dynamic infomation on web
- 欢迎使用CSDN-markdown编辑器
- Android代码规范
- 赢在职场-WEB全栈开发-1-5border
- 常用数据库的JDBC驱动程序写法
- 赢在职场-WEB全栈开发-1-6padding
- NYOJ 喷水装置(一) (贪心)
- 图像处理中常用的彩色模型
- 用java编程输出九九乘法表
- 赢在职场-WEB全栈开发-1-7margin