CSS 图像/文本菜单跨浏览器问题

Question

我有问题。

我试图在菜单中显示一些图像和一些文本，但是每个图像的高度都比文本高，因此文本以图像为中心。

基本上，这是网站:http://www.sasstraliss.org/scme2202

而且，它在 firefox 中的浏览效果非常好。

在 chrome 中，它垂直显示。在 IE 中，图像被压缩。

我的 CSS 哪里出错了？

我正在对图像使用这种方法...

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

Answer 1

我没有看过你的代码，但假设你的 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;
        }

注意:始终明确设置图像的尺寸是一种很好的做法，这样可以加快页面渲染速度，并在加载过程中重排页面时停止跳动。