IE7的CSS宽度:inline-block即使经过黑客攻击也不工作

Question

我试图在我的网页上显示带有文本的图像列表。但在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
 }   

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

我试着补充:*宽度:173px类接受，但然后它是打破当图像宽度更大，如果我增加所有接受类的宽度宽度(即使图像宽度较小的地方正在增加，所以页面看起来不太好)。

有人能帮我一下吗?我想要的只是用它们的默认宽度显示这些图像。

Answer 1

IE7只支持默认内联元素的inline-block。

使用float: left;代替，它遵循标准工作，没有任何IE hack:

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

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