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

我试图显示一些图像旁边的菜单中的一些文本，但每个图像都有比文本更大的高度，因此文本被集中到图像。

本质上讲，这是网站：http://www.sasstraliss.org/scme2202

而且，它在Firefox中查看了完美的罚款。

在铬中，它垂直显示。在IE中，图像被压扁。

我的CSS哪里出错了？

我使用这种方法的图像...

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

来源

2012-06-13 Edge

我只是试图消除最小高度和表格单元格显示，现在工作得很好。

来源

2012-06-13 04:53:39 Edge

但是现在图像不显示在IE中。虽然我并不担心。 – Edge

我没有看过你的代码，但假设你有你的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-13 05:28:02

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

回答

相关问题