【css】ie6 和 ie7 下 position 与 overflow 的问题
前几天做的项目中碰到这样一个问题，在 ie6 和 ie7 下，给父元素设置 overflow:hidden 不起作用无法隐藏，后来发现是子元素中有设置 position:relative，如果子元素删除 position:relative，那么父元素的 overflow:hidden 可以隐藏，具体代码及效果如下：
html 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>Document</title>
<style>
*{margin:0;padding:0;}
.w{width:480px;margin:50px auto;}
.w ul{width:100%;overflow:hidden;height:144px;border:1px solid #f00;}
.w li{position:relative;height:36px;width:108px;border:1px solid #d1d1d1;line-height:36px;text-align:center;float:left;display:inline;margin:0 10px 10px 0;}
</style>
</head>
<body>
<div class="w">
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
<li>555555555</li>
<li>666666666</li>
<li>777777777</li>
<li>888888888</li>
<li>999999999</li>
<li>000000000</li>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
<li>555555555</li>
<li>666666666</li>
<li>777777777</li>
<li>888888888</li>
<li>999999999</li>
<li>000000000</li>
</ul>
</div>
</body>
</html>
ie6 和 ie7 下效果：
解决方法：
给父元素设置 position:relative。
【css】ie6 和 ie7 下 position 与 overflow 的问题的更多相关文章
- ie6、ie7下overflow失效
如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...
- 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效
前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...
- li中包含span，在IE6、IE7下会有3pxbug
如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...
- IE6和IE7下绝对定位position：absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
- IE6、IE7、IE8中overflow:hidden无效问题
在做图片无缝滚动效果时遇到了这个兼容问题 div宽1000px高250px超出隐藏. 但在Firefox中正常,超出部分隐藏,但是在IE6.IE7.IE8.Sogou高速下都显示了出来.做了这么多年的 ...
- ie6和ie7下z-index bug的解决办法
一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...
- 关于JSON.parse在ie6，ie7下未定义的issue
情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. ...
- margin-bottom在IE6和IE7下失效的解决办法
IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了: overflow:hidden;zoom ...
- 解决ie6、ie7下float为right换行的情况
IE6下有不少奇怪的Bug,今天就碰到一个,float:right换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6 ...
随机推荐
- First Blog, “Hello, world!”
As every single book says as a tradition, "Hello, world!" An explanation about the name – ...
- 居于集成了adt的Android 开发环境配置
一．先说一下环境 Windows 8.1 64 位 注:win7 Ultimate 64 配置会出现 Android SDK manger 不能启动的问题,是因为android.bat 里调用了fi ...
- 十六进制转十进制函数_C编程
/**************************十六进制转十进制函数**************************//*函数原型:uint htd(uint a)/*函数功能:十六进制转十 ...
- 捉BUG记（To Catch a Bug）
大约有一年整没有写一篇博客了,由于各种原(jia)因(ban)导致闲暇时间要么拿着IPad看岛国奇怪的片(dong)子(hua).要么拿着kindle看各种各样的资(xiao)料(shuo).本来想写 ...
- 委托、匿名委托、Lambda 表达式、Expression表达式树之刨根问底
本篇不是对标题所述之概念的入门文章,重点在阐述它们的异同点和应用场景.各位看官,这里就不啰嗦了,直接上代码. 首先定义一个泛型委托类型,如下: public delegate T Function&l ...
- 设计模式之美：Adapter（适配器）
索引 别名 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):简单直接的对象适配器. 实现方式(二):实现双向类适配器. 别名 包装器(Wrapper) 意图 将一个类的接口转换成客户 ...
- 作业七：团队项目——Alpha版本冲刺阶段-04
昨天进展:象棋图片以及窗体完成 今天安排:代码编写.
- 团队项目——打地鼠游戏(SPEC)系统性能评估测试
1.SPEC测试的目标: 本轮测试的目的是测试打地鼠游戏的需求以及确保每个需求都能得到满足的方法.编写此需求说明书是为了使用户和开发人员对所开发的系统有一致的理解.通过阅读此说明书,开发人员可以了解当 ...
- 那些年我们一起追过的Linux命令
1. cd - 作用:返回上次的目录,类似于Windows的后退功能: 2. man ascii 作用:打印出八进制.十六进制和十进制的ASCII码表:(再也不用Google ASCII表啦) 3. ...
- [游戏模版17] Win32 推箱子 迷宫
>_<:Here introduce a simple game: >_<:resource >_<:only can push a box and finally ...