CSS-изображение/текстовое меню Cross Browser Issue

Question

У меня проблема.

Я пытаюсь отобразить некоторые изображения рядом с некоторым текстом в меню, однако каждое изображение имеет большую высоту, чем текст, поэтому текст центрируется по изображению.

По сути, это сайт: http://www.sasstraliss.org/scme2202

И, видит прекрасно в Firefox.

В хромированном виде он отображается вертикально. В IE изображения раздавлены.

Где мой CSS поступил не так?

Я использую этот подход для изображений ...

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

Answer 1

Я просто попытался удалить мин-высоту и отображение ячейки таблицы, и теперь он работает нормально.

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

Примечание: хорошая практика всегда устанавливать размеры ваших изображений в явном виде, это ускоряет рендеринг страниц и останавливает все, что происходит, когда страница переплавляется во время загрузки.