css - 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

我刚刚尝试删除 min-height 和表格单元格显示，现在它工作正常。

Answer 2

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

注意：始终明确设置图像的尺寸是一种很好的做法，这会加快页面渲染速度并防止页面在加载过程中重排时跳来跳去。