jquery - JQuery UI 菜单右浮动图标导致 Internet Explorer 中的新行

Question

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

菜单是用脚本创建的：

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

它应该是什么样子（在 Chrome 和 Firefox 中的作用）：

它在 Internet Explorer 中的外观：

我相信它与浮动右侧菜单图标有关，但我不知道如何解决它。如果有人有解决方案或至少知道如何处理，将不胜感激。

Answer 1

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

HTML：

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

CSS：

li a img {
  float: left;
}

.clear {
  clear: both;
}

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