当前位置：首页 → 问答吧 → 图片不随滚动条滚动

图片不随滚动条滚动

时间：2010-09-09

来源：互联网

图片在容器中是垂直居中的所以加了相对定位火狐和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> <style type="text/css"> ul { list-style:none;} .upload_list{ padding:23px 0 0 16px; width:657px; height:448px; overflow:scroll; overflow-x:hidden;} .upload_list li{ margin-right:28px; float:left; margin-bottom:35px;} .upload_list li p{ width:98px; height:98px; border:1px solid #e4e4e4;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;} .upload_list li span{position:static;+position:absolute;top:50%} .upload_list li img{position:static;+position:relative;top:-50%;left:-50%; width:98px;} .setCover{ text-align:center;} .uploadPhotos{ width:673px; height:505px; border:1px solid #e4e4e4;} </style> </head> <body> <div class="uploadPhotos"> <div class="upload_list"> <ul> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> <li><p><span><img src="pintour/pintour/images/img.png" /></span></p><div class="setCover">289320.jpeg</div></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 zl2165 于 2010-9-9 16:38 编辑 ]

作者: zl2165 发布时间: 2010-09-09

没人啊