前几天做的项目中碰到这样一个问题，在 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. oracle 根据字段分组后,将组内的数据根据字段排序

    row_number() over(partition by 分组字段 order by 排序字段 desc)

  2. poj 3613 经过k条边最短路 floyd+矩阵快速幂

    http://poj.org/problem?id=3613 s->t上经过k条边的最短路 先把1000范围的点离散化到200中,然后使用最短路可以使用floyd,由于求的是经过k条路的最短路, ...

  3. Protues记录文档_1

    1.实现器件的连线端有红蓝小方块来表示改端电平变化. 操作:选菜单:SYSTEM\SET ANIMATION OPTION ,相应的勾选对应的选项2 附:可以添加逻辑探测器,在库中直接搜索“LOGIC ...

  4. Linux splint命令

    一.简介 splint是一个针对C语言的开源程序静态分析工具. 二.安装配置 1)yum安装 yum install -y splint 2)源码安装 http://www.splint.org/ 配 ...

  5. Caffe学习系列(20)：用训练好的caffemodel来进行分类

    caffe程序自带有一张小猫图片,存放路径为caffe根目录下的 examples/images/cat.jpg, 如果我们想用一个训练好的caffemodel来对这张图片进行分类,那该怎么办呢? 如 ...

  6. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  7. 微软BI 之SSRS 系列 - 如何设置页标题重复

    开篇介绍 这个问题大家经常碰到,特意写一下如何解决这个小问题. 问题 默认情况下当报表超过一定的高度会自动分成多页. 第二页默认是看不到标题的. 解决方法 2012版本下在 Column Groups ...

  8. DDD领域驱动设计之运用层代码

    1.DDD领域驱动设计实践篇之如何提取模型 2.DDD领域驱动设计之聚合.实体.值对象 3.DDD领域驱动设计之领域基础设施层 4.DDD领域驱动设计之领域服务 5.整体DEMO代码 什么是运用层,说 ...

  9. 微软MSDN订阅用户已可提前手工下载Windows 10安装包

    在Windows 10发布之夜,当全世界都在翘首以盼Windows 10免费发布推送的到来,MSDN订阅用户可以立马享受一项令人项目的特殊待遇:手工下载Windows 10完整安装包+免费使用的激活密 ...

  10. 使用SignalR为FineUI/Webform打造消息总线

    第一次写博客,语言组织能力不好,请大家多多包涵! 效果图如下: 图片的右下角即为SignalR消息总线的消息框. 一.建立SignalR服务端 第一步:打开一个空的FineUI 4.5空项目文件,在空 ...