Вертикальное выравнивание испорчено из-за изображения

Question

<ul>
    <li><a href="#">Menu 1 <img src="image.png" alt="" /></a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
</ul>

Вертикальное выравнивание этого меню нарушено из-за добавления небольшого изображения внутри ликов. Пожалуйста, смотрите: http://jsfiddle.net/7n4sZ/

Есть ли какое-нибудь исправление, которое бы работало в кросс-браузерном режиме?

Большое спасибо за вашу помощь!

Answer 1

Я сделал вам решение проблемы.Непосредственно с CSS трудно, если вы добавите несколько изображений с разной высотой.С большим количеством математики и группировкой по высоте это возможно.

Но для вашей проблемы - решение

Answer 2

Добавьте это к вашему CSS

img {vertical-align:bottom;}

здесь: скрипка