当前位置：首页 → 问答吧 → IE6下绝对定位后无法超出隐藏的问题

IE6下绝对定位后无法超出隐藏的问题

时间：2010-09-04

来源：互联网

<!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> <style type="text/css"> * { margin:0; padding:0; } li { list-style:none; } .box { width:500px; overflow:hidden; height:152px; border:2px solid #0C3; padding:10px; } ul { width:1000%; float:left; } li{ float:left; width:200px; height:130px; border:1px solid #ccc; margin:10px; position:relative; } li img{ width:200px; height:130px;} span{ display:block; position:absolute; width:40px; height:20px; background:#fc0; top:108px; left:154px; } </style> </head> <body> <div class="box"> <ul> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

现在遇到的问题是，绝对定位后的span无法在超出.box区域范围后隐藏，
其他浏览器倒可以，不知道各位有什么好办法解决。
我这样做的是这样一个效果，相当于给图片加水印

作者: auror 发布时间: 2010-09-04

<!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> <style type="text/css"> * { margin:0; padding:0; } li { list-style:none; } .box { width:500px; overflow:hidden; height:152px; border:2px solid #0C3; padding:10px; position:relative; } ul { width:1000%; float:left; } li{ float:left; width:200px; height:130px; border:1px solid #ccc; margin:10px; position:relative; } li img{ width:200px; height:130px;} span{ display:block; position:absolute; width:40px; height:20px; background:#fc0; top:108px; left:154px; } </style> </head> <body> <div class="box"> <ul> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> <li><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /><span>水印</span></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: wyysf 发布时间: 2010-09-04

原来如此，谢谢哥们