【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 ...
随机推荐
- Linq to SQL 基础篇
LinqtoSqlDataContext Linq = new LinqtoSqlDataContext(ConfigurationManager.ConnectionStrings["sz ...
- iOS自动适配
自iphone4s以后,苹果先后推出了iphone5.iphone5s.iphone6.iphone6plus.iphone6s.iphone6splus这些新的机型,它们的屏幕大小各有所异,从此给我 ...
- CSS的四种引入方式
1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...
- iBoxDB for .NET v1.5发布, 移动NoSQL数据库
iBoxDB for .NET是一个无须安装配置就可以运行的数据库. 拥有非常高效的性能同时能提供事务支持. 可嵌入到应用程序中也可以使用TCP与应用程序进行远程数据交互 使用易用的操作接口,不需要阅 ...
- 用c#开发微信 (7) 微渠道 - 推广渠道管理系统 2 业务逻辑实现
我们可以使用微信的“生成带参数二维码接口”和 “用户管理接口”,来实现生成能标识不同推广渠道的二维码,记录分配给不同推广渠道二维码被扫描的信息.这样就可以统计和分析不同推广渠道的推广效果. 上次介绍了 ...
- 设计模式之美：Proxy（代理）
索引 别名 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用相同 Subject 接口实现 Proxy. 别名 Surrogate 意图 为其他对象提供一种代理以控制对这个对象的 ...
- 39行代码实现JS HTML模板（轻量+高效+易用）
otmpl 是一个轻量级前端模版(仅有39行无压缩代码,支持缓存),所用指令仅需[#...#]和{#...#},前者包含需要输出html语句,后者包含js变量. 支持javascript完整语法,你可 ...
- 对VM挂载新加入的磁盘
在虚拟机配置中增加磁盘后,启动Linux,使用root登录. 首先查看未分区的磁盘,使用下面命令: ## 查看未使用的磁盘 fdisk -l 磁盘/dev/sdb后面没有任何分区,是新挂载的磁盘 输入 ...
- [Java Web] 6、Tomcat服务器的安装及配置以及JSP技术笔记
目录 1.Web容器简介 2.Tomcat粗介及配置粗讲 3.Tomcat服务器配置 3-1.修改端口号 3-2.配置虚拟目录 3-3.配置首页 4.JSP执行流程 5.JSP粗略了解 1 ...
- jenkins2 Jenkinsfile和load
更复杂的pipeline实例,使用了Jenkinsfile和load. 文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.c ...