Question

我正在尝试在我的网页上显示带有文字的图像列表。但是在IE7中，它将每个图像显示在另一个图像之下，而不是与其他图像相邻。看起来是因为缺乏对内联块的支持。我阅读了一些文章，并在我的CSS中添加了一些内容，但它仍无效。

他是HTML：

 <div id="image_example">
            <div class="accept">
                <h4>Acceptable</h4>
                <img width="84" height="150" src="some-image" alt="accept">
            </div>


            <div class="unaccept">
                <h4>Unacceptable</h4>
                <img width="112" height="150" src="some-image"">
            </div>


            <div class="unaccept">
                <h4>Unacceptable</h4>
                <img width="215" height="150" src="some-image">
            </div>


            <divclass="unaccept">
                <h4>Unacceptable</h4>
                <img width="165" height="150" alt="unaccept" src="some-image"">
            </div>

    </div>

我的CSS看起来像这样::

.unaccept, .accept{
  display: inline-block;
  text-align: center;
  margin: 0 0.75em;
  zoom:1;//Added after reading other posts
  *display:inline; //Added after reading other posts
 }

在阅读了很多关于这个问题的文章/页面后，我添加了最后两行。但它仍然没有用。

我尝试添加： *宽度：173px到类接受，但是当图像宽度更大时它会断开，如果我增加所有接受类的宽度宽度（即使图像宽度越小越好，因此页面看起来不太好再次）。

有人可以帮帮我吗？我想要的只是以默认宽度显示这些图像。

Answer 1

IE7仅支持默认情况下内联元素的inline-block。

使用float: left;代替符合标准，没有任何IE黑客攻击：

.image_example { overflow: hidden; }

.unaccept, .accept {
    float: left;
    text-align: center;
    margin: 0 0.75em;
}

演示：http://jsfiddle.net/Guffa/xCREN/

IE7的CSS宽度：内联块即使在黑客攻击后也无法正常工作

1 个答案: