zoukankan      html  css  js  c++  java
  • 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{ 730px; margin:0 auto ; text-align:center;}
    #picslist h1{font-size:18px; color:#F90; padding:10px; margin:0 auto; }
    #picslist ul{ 700px; float:left; background-color:#090;}
    #picslist ul li{float:left;display:inline; 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; 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了

  • 相关阅读:
    PHP数组处理总结
    设计模式之-工厂模式理解
    我的世界观
    编程入门
    2019 新的一年
    placeholder 不支持ie8
    2018年8月20日
    HttpClientUtil
    通用mapper
    small_demo
  • 原文地址:https://www.cnblogs.com/ckmouse/p/2434942.html
Copyright © 2011-2022 走看看