代码之家  ›  专栏  ›  技术社区  ›  Fer

IE中的CSS水平图像列表

  •  1
  • Fer  · 技术社区  · 16 年前

    我已经将自己编码到一个CSS角中。我有一个图像列表,使用无序列表显示在彼此旁边。无序列表被放置在固定宽度的DIV中,这样每3个图像,接下来的3个图像将显示在下一个“行”上。

    UL中的每个LI不仅显示图像,还显示各种各样的东西,例如:

    <div id="colmain">
    <ul class="imagelist">
    <li>
    <h2>Image title</h2>
    <a href=""><img src="" /></a>
    <p>Description</p>
    </li>
    </ul>
    </div>
    

    这在大多数浏览器中都可以正常工作,除了IE7。IE7将图像显示在彼此下方,而不是彼此相邻。我从经典的水平菜单栏技术中知道,可以通过将LI的float设置为Left来解决这个问题。这不适合我的情况,因为我不知道每个李的高度,这取决于内容。对于每一个LI,其高度不同,会出现一些非常奇怪的布局情况,例如,一个图像位于空行的右侧。以下是我的CSS的精简版:

    .imagelist { border-collapse:collapse; font-size:9px; width:850px; }
    .imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
    
    .imagelist li a { display:inline-block; position:relative; }
    .imagelist li a img, { padding:0; margin:0; position:relative;  }
    

    基本上,我只想让IE7听我的话并尊重内联块语句,它应该显示彼此相邻的元素。

    1 回复  |  直到 11 年前
        1
  •  1
  •   Fer    16 年前

    通过一点聪明的谷歌搜索,我找到了这个条目:

    http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

    缩放:1;和*显示:内联;解决此问题。天哪,我很讨厌。

    推荐文章