0

我正在尝试在我的网页上显示带有文本的图像列表。但在 IE7 中，它会将每个图像显示在另一个图像下方，而不是在另一个图像旁边。看起来是因为缺乏对 inline-block 的支持。我阅读了一些文章并在我的 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
 }

在阅读了很多关于这个问题的文章/页面后，我添加了最后两行。但它仍然无法正常工作。

我尝试在类接受中添加：*width:173px，但是当图像宽度更大时它会中断，如果我增加所有接受类的宽度宽度（即使图像宽度较小的地方也会增加，所以页面又不好看了）。

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

4

1 回答 1

0

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/

于 2013-04-05T08:25:43.607 回答