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;
        }

注意：最好明确设置图像的尺寸，这样可以加快页面渲染速度，并在加载过程中重新翻转页面时阻止事物跳跃。