当前位置：首页 → 问答吧 → 当li的position:relative时，外围div overflow:hidden无效？

当li的position:relative时，外围div overflow:hidden无效？

时间：2011-01-11

来源：互联网

火狐 ie8正常，ie6 ie7无效，悲剧啊，请问为什么会这样？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> *{padding:0;margin:0} #w{ width:200px; height: 200px; overflow: hidden; border:1px solid red;background:orange} li{ border:1px solid #ccc; position:relative; height: 30px; } </style> <body> <div id="w"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 tinshee 于 2011-1-11 20:02 编辑 ]

作者: tinshee 发布时间: 2011-01-11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> *{padding:0;margin:0} #w{ width:200px; height: 200px; overflow: hidden; position:relative;border:1px solid red;background:orange} li{ border:1px solid #ccc; position:relative; height: 30px; } </style> <body> <div id="w"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: radom 发布时间: 2011-01-12

将position去掉就可以了..

作者: def2587 发布时间: 2011-01-12

有效，给外围增加一个position:relative;

不过不推荐频繁使用overflow:hidden; 容易带来布局上的麻烦，有可能在后期维护的时候。

作者: yoom 发布时间: 2011-01-12