由于图像，垂直对齐混乱

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>

由于在li内部添加了一个小图像，因此该菜单的垂直对齐混乱。请参阅：http://jsfiddle.net/7n4sZ/

是否有任何可以跨浏览器工作的修复程序？

非常感谢你的帮助！

Answer 1

将此添加到您的css

img {vertical-align:bottom;}

fiddle here

Answer 2

我已经为你做了一个jquery解决方案。如果添加一些不同高度的图像，直接使用css会很困难。通过更多的数学运算和按高度分组，这是可能的。

但对你的问题 - solution