前几天做的项目中碰到这样一个问题，在 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 的问题的更多相关文章

  1. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  2. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  3. li中包含span，在IE6、IE7下会有3pxbug

    如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...

  4. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  5. IE6、IE7、IE8中overflow:hidden无效问题

    在做图片无缝滚动效果时遇到了这个兼容问题 div宽1000px高250px超出隐藏. 但在Firefox中正常,超出部分隐藏,但是在IE6.IE7.IE8.Sogou高速下都显示了出来.做了这么多年的 ...

  6. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  7. 关于JSON.parse在ie6，ie7下未定义的issue

    情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. ...

  8. margin-bottom在IE6和IE7下失效的解决办法

    IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了: overflow:hidden;zoom ...

  9. 解决ie6、ie7下float为right换行的情况

    IE6下有不少奇怪的Bug,今天就碰到一个,float:right换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6 ...

随机推荐

  1. java内部类和匿名内部类

    内部类即是包含在类里面的又一个类. java内部类分为: 成员内部类.静态嵌套类.方法内部类.匿名内部类 . 内部类的共性 (1).内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.clas ...

  2. [UE4]武器碰撞

    实现武器战斗伤害系统,击中时如何发出碰撞事件产生伤害,目前探索的有通过物理碰撞和LineTrace两种方法. 物理碰撞通过Overlap事件的方法,优点是易于实现,缺点是无法具体到碰撞骨骼位置,低帧数 ...

  3. [Leetcode][JAVA] Best Time to Buy and Sell Stock I, II, III

    Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of a gi ...

  4. [转]新兵训练营系列课程——平台RPC框架介绍

    原文:http://weibo.com/p/1001643875439147097368 课程大纲 1.RPC简介 1.1 什么是RPC 1.2 RPC与其他远程调用方式比较 2.Motan RPC框 ...

  5. 用c#开发微信 (15) 微活动 1 大转盘

    微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...

  6. Heroku空项目 Git本地Push代码错误 以及 Heroku Web启动错误

    在Eclipse下建了一个"Blank Heroku App", 然后将自己写好的JS Web练习代码直接复制放到了这个空项目下, 由于Eclipse下的git工具不太会用, 导致 ...

  7. C++ WIN32控制台异常关闭回调函数

    /* This is an example of the SetConsoleCtrlHandler function that is used to install a control handle ...

  8. [stm32] LED

    /**************************************************************************** * 文件名: main.c * 内容简述: ...

  9. Spring - 初始化spring容器

    2016.01.12 学习linux内核的过程中发现变相的提升了自己的工程能力.以前觉得spring这些东西很复杂麻烦.然而,学了linux内核再看这些东西,发现好简单. 学习spring首先就要学习 ...

  10. Bootstrap3生成响应式的特价商品展示布局

    在线演示 本地下载 在线前端调试地址,大家可以在线自己调试. 在线调试唯一地址:http://www.gbtags.com/gb/debug/fa35e396-0a04-4b73-9bfc-c6334 ...