您的位置:首页 > 其它

li标签float:left,IE6中第二行会空缺一块,ie8和FF正常,怎么解决?

2012-04-06 16:59 411 查看
这是HTML------

<div id="picslist">
<h1>图片展示</h1>

<asp:ListView ID="ListView1" runat="server">
<EmptyDataTemplate>
没有匹配记录
</EmptyDataTemplate>

<LayoutTemplate>
<ul>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</ul>
<div class="cls"></div>
</LayoutTemplate>

<ItemTemplate >
<li>
<a href="picshow.aspx?id=<%#Eval("id") %>&bid=<%#Eval("bigclassid") %>&sid=<%#Eval("smallclassid") %>">
<img src ='<%#Eval ("smallpicpath").ToString().Remove (0,1) %>' alt='<%#Eval ("title") %>' />
<%#Eval ("title") %></a>
</li>
</ItemTemplate>

</asp:ListView>

</div>

这是CSS------

#picslist{ width:730px; margin:0 auto ; text-align:center;}
#picslist h1{font-size:18px; color:#F90; padding:10px; margin:0 auto; }
#picslist ul{ width:700px; float:left; background-color:#090;}
#picslist ul li{float:left;display:inline; width:204px; margin:0 0 5px 20px;background-color:#09F;}
#picslist ul li a{display:block; }
#picslist ul li a img{padding:1px; border:1px solid #e1e1e1; margin-bottom:3px; width:200px; height:200px;}
#picslist ul li a:hover img{border:2px solid #f98510; padding:0;}

此代码实现这样一个效果:显示6张图片,2行,每行3张,如
O O O
O O O

在IE6中看时,第一行正常,第二行第一个图片的位置空了,图片被挤到第二行第二个的位置了,第二行第二个图片跑到了第三张的位置,第二行第三张图片跑到了第3行第一个,就像这样
O O O
O O
O

在IE8和ff6中都是正常的,百思不得其解,而且以前也没有遇到过这样的情况,请高手帮忙

1.加个属性吧 li{ vertical-align:bottom;}就可以解决这个问题了。只有IE6会有这种情况

2.给li加样式 overflow:hidden 就ok了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: