JQuery-UI“关闭”图标在 Firefox 中出现错误答案

【问题标题】：JQuery-UI "close" icon appearing wrong in FirefoxJQuery-UI“关闭”图标在 Firefox 中出现错误
【发布时间】：2011-07-14 09:39:58
【问题描述】：

我继承了一个前端带有一些 JQuery-UI 的 ASP 网站，它负责处理选项卡和菜单。它工作正常；唯一的小故障是标签在 Firefox 上奇怪地出现了。

当用户点击 Superfish 菜单时添加标签。选项卡看起来不错，但添加了一些标记以在选项卡右侧添加“X”（关闭）图标。在 IE 和 Webkit（Chrome、Safari 等）上，标签显示如下：

|---------|
|        x|
|Tabname  |
|---------|

但是，在 Firefox 上，它看起来像：

|---------|
|         |
|Tabname  |
|x        |
|---------|

我对 JQuery 了解不多，但我尝试过使用标记，但无法像其他浏览器那样在 Firefox 的右上角显示“关闭”图标。

代码的相关部分（即，如果我把它拿出来，“关闭”图标就会消失:)）看起来像：

  var $tabs = $('#tabs').tabs({
            tabTemplate: '<li class="close" align=left><a  href="#{href}">#{label}</a><span  class="ui-icon ui-icon-close" ></span></li>',
          });

谁能帮我弄清楚这里发生了什么？如果相关，则使用的是 JQuery-1.4.2.min.js 和 JQuery-ui-1.8.4.min.js。

【问题讨论】：

标签： jquery-ui firefox

【解决方案1】：

您可能对http://bugs.jqueryui.com/ticket/5603感兴趣这似乎与 jquery ui 错误报告的问题相同。计划在 1.9 版本的 jquery ui 中修复，您可以通过此链接找到一些可能的解决方法。

例如，在页面 http://jqueryui.com/demos/tabs/#manipulation 上，您可能会找到以下解决方法（在 FF 中运行良好）：

#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }

【讨论】：