0

Web ページにテキスト付きの画像のリストを表示しようとしています。しかし、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
 }

この問題に関する多くの記事/ページを読んだ後、最後の 2 行を追加しました。しかし、まだ機能していません。

*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 に答える