0

問題が発生しています。

メニューにテキストと一緒にいくつかの画像を表示しようとしていますが、各画像の高さがテキストよりも大きいため、テキストは画像の中央に配置されます。

基本的に、これはサイトです: http://www.sasstraliss.org/scme2202

また、Firefox では問題なく表示されます。

クロムでは、縦に表示されます。IE では、画像が押しつぶされます。

私のCSSはどこで間違っていますか?

私は画像にこのアプローチを使用しています...

#menu img {
min-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0px 0px 0px 10px;
}
4

2 に答える 2

0

min-height とテーブル セルの表示を削除しようとしたところ、正常に動作するようになりました。

于 2012-06-13T04:53:39.200 に答える
0

私はあなたのコードを見ていませんが、HTML に次のようなものがあると仮定します:

<div id="menu">
    <a href="someurl"><img src="someimage.gif" />Some text</a>
    <a href="otherurl"><img src="otherimage.gif" />Other text</a>
</div>

次の CSS でうまくいくはずです。

div#menu {
overflow: auto;
}
    div#menu a {
    float: left;
    margin-left: 10px;
    }
        div#menu a img {
        height: 60px;
        width: 60px;
        margin-right: 10px;
        vertical-align: middle;
        }

注: 常に画像のサイズを明示的に設定することをお勧めします。これにより、ページのレンダリングが高速化され、読み込み中にページがリフローされるときにジャンプが停止します。

于 2012-06-13T05:28:02.600 に答える