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圖像/文本菜單跨瀏覽器問題

回答

相關問題