Vertical alignement messed up due to the image

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

Vertical alignment of th开发者_如何转开发is menu is messed up due to the addition of a small image inside on of the li's. Please see: http://jsfiddle.net/7n4sZ/

Is there any fix that'd work cross-browser?

Many thanks for your help!

---

I`ve made you a jquery solution. Directly with css is dificult if you add some images with different height. With more math, and grouping by height, it is possible.

But to your problem - solution

---

Add this to your css

img {vertical-align:bottom;}

fiddle here