JQuery UI菜单浮动右图标导致Internet Explorer中出现新行

我的JQuery UI菜单构建得非常简单，如下所示：

<ul id="menu">
  <li><a href="..."><img src="icon.png" /></a>
  <ul>
    <li><a href="..."><img src="anotherIcon.png" /></a>
    <li><a href="..."><img src="thridIcon.png" /></a>
  </ul>
</ul>

它应该是什么样子（在Chrome和Firefox中也是如此）：

它在Internet Explorer中的外观：

我相信这与浮动右菜单图标有关，但我不知道如何解决它。

---

如果有人有一个解决方案或至少有一个解决方法的想法，我会非常感激。

好的，我自己找到了一个解决方案：

HTML:

---

CSS是对JQuery UI提供的CSS的补充。

顺便说一句，当-标记中有文本而不是图像时，一切都很好，并显示在一行中。

$(function() {
  $("#menu").menu();
});

<li>
  <a href="...">
    <img src="icon.png" />
    <div class="clear"></div>
  </a>

li a img {
  float: left;
}

.clear {
  clear: both;
}