li標簽float:left,IE6中第二行會空缺一塊,ie8和FF正常,怎么解決?


這是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了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM